position:定位
2016-12-17 14:04:34 0 举报
AI智能生成
position
作者其他创作
大纲/内容
position:定位
文档流
只有三种情况会使得元素脱离文档流,分别是:浮动绝对定位和相对定位。
relative
定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。
只要将我们平时布局页面的div的CSS属性中加上position:relative后,就不只是用float布局页面了,还可以用TRBL进行布局页 面 了,或者说加上position:relative的DIV也可以像普通的DIV进行布局页面了,只不过还可以用TRBL进行布局页面。但是 position属性为absolute不可以用来布局页面,因为如果用来布局的话,所有的DIV都相对于浏览器的左上角定位了,所以只能用于将某个元素 定位于属性为absolute的元素的内部某个位置。
在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。
absolute
对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层
定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不再存在。
z-index属性
z-index,又称为对象的层叠顺序,它用一个整数来定义堆叠的层次,整数值越大,则被层叠在越上面,当然这是指同级元素间的堆叠,如果两个对象的此属 性具有同样的值,那么将依据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的。需要注意的是,父子关系是无法用z-index来设定上下关系 的,一定是子级在上父级在下。
使用static 定位或无position定位的元素z-index属性是无效的。
如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值
0 条评论
下一页