关于css中的position定位
希望这波position可以有帮助^_^!
css中的position属性主要分为:static、relative、absolute、fixed、center、page、sticky(红色是css3中才可使用的值)
1.static:对象遵循常规流。此时4个定位偏移属性不会被应用。
2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
3.absolute:对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。
4.fixed:与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。
5.center(css3中使用):与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。
6.page(css3中使用):与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。
7.sticky(css3中使用):对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。
(1,2,3在各个浏览器下都支持;4在ie6.0中不支持,在androidBrowser2.1-2.3#3中部分支持;5,6都不支持;7在Firefox32.0+和Safari6.1-9.0【webkit】中支持)
举个栗子(举最常用的1,2,3,4):
1.static:

2.relative:

3.absolute:

4.fixed:

加油!
关于css中的position定位的更多相关文章
- 笔记:css中的position定位
position的值可以是:static,relative,absolute,fixed. 默认值是 static.设置 left.top值无效. relative是相对定位,可以设置left.top ...
- css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Positio ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- CSS position 属性_css中常用position定位属性介绍
css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- css 中的position z-index em rem zoom 的基本用法
1.position定位: CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. ...
随机推荐
- React翻译官网文档之JSX
什么是JSX? 看下面的代码它被称为JSX,它既不是字符串也不是HTML,而是一种facebook公司对javascript语法的拓展.虽然写法很奇怪最终仍会会被编译为javascript代码 con ...
- 关于constraint的用法
1.主键约束:要对一个列加主键约束的话,这列就必须要满足的条件就是非空因为主键约束:就是对一个列进行了约束,约束为(非空.不重复)以下是代码 要对一个列加主键,列名为id,表名为emp格式为:alt ...
- 【one day one linux】find 用法详解小记
find命令的功能很强大,查找文件的选项很多,所以这是一个很实用并且很常用的linux命令.但是他有个缺点就是搜索的时候比较慢的.而与之相对的有一个locate命令. find的命令格式 find ...
- DHTMLX 修改方法加参数
dhtmlx下拉框选项过长,导致显示不全,所以在下拉框里加了title 具体方法如下: dhtmlXCombo.prototype.modes.checkbox.render=function(c, ...
- 腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs
[原文链接] ## 写在前面 curvejs 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 ...
- 兼容IE8的input输入框的正确使用姿势
input是一个很常见的标签,大家使用的也很常见,但是我在具体的工作中发现要想完美的使用这个标签还是任重而道远,下面是我碰到的几个问题. 1.我们在使用这个标签的时候会习惯的加上placeholder ...
- bootstrap快速入门笔记(七)-表格,表单
一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...
- Android系统--输入系统(十)Reader线程_核心类及配置文件深入分析
Android系统--输入系统(十)Reader线程_核心类及配置文件深入分析 0. 前言 个人认为该知识点阅读Android源代码会不仅容易走进死胡同,并且效果并不好,前脚看完后脚忘记,故进行总结, ...
- Android触摸事件的应用
前言 上一篇讲了Android触摸事件的传递机制,具体可以看这里 初识Android触摸事件传递机制.既然知道Android中触摸事件的传递分发,那么它能解决什么样的问题,在我们实际开发中如何应用,这 ...
- Gym - 101102C线段树
Judge Bahosain was bored at ACM AmrahCPC 2016 as the winner of the contest had the first rank from t ...