关于定位

1、static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

2、relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。没有脱离文档流。如果父级标签有定位,那么定位是相对于父级标签的,
如果父级标签没有定位,那么定位时相对于浏览器的。可通过z-index进行层次分级。当一个div有定位,下面的div没有定位时,上面的div层级高,如果下面的div也有定位,那么下面的div层级高于上面div的层级  

3、absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。脱离文档流,如果父级标签没有定位的话,定位时相对浏览器的,如果父级标签有定位,就是相对父级标签的元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed(固定定位):脱离文档流,生成绝对定位的元素,相对于浏览器窗口进行定位。不论父级标签是否有定位,滚动条滚动时,定位的元素相对可视窗口的位置不变,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。常用在广告框。

5、inherit:(继承)可以继承父级标签的定位,只继承position属性,子元素可以自己设置left,top值;

posted on 2017-09-22 18:26  关玉珊  阅读(105)  评论(0编辑  收藏  举报

导航