css中定位position属性的用法是什么

lxf2023-02-16 15:32:22

在css中定位position属性的用法:1、一般标签元素无任何定位属性都属于静态定位;2、从文档流中拖出绝对定位元素;3、相对定位元素不能层叠;4、固定定位与绝对定位相似,但与浏览器窗口定位相比,不会随着滚动条滚动。

css中定位position属性的用法是什么

本教程操作环境:windows7系统、css3版,DELL G3电脑。

在css中定位position属性的用法:

1、静态定位(static)

无定位属性的一般标签元素属于静态定位,在页面底部属于标准流。

2、绝对定位(absolute)

从文档流中拖出绝对定位元素,使用left、right、top、bottom等属性相对于最接近定位设置的父级元素进行绝对定位。如果元素的父级没有设置定位属性,则基于 body 元素左上角作为定位的参考。绝对定位元素可以层叠,层叠顺序可以通过 z-index 属性控制,z-index值为无单位整数,大的在上面,可以有负值。

绝对定位方法

如果其父元素设置了static以外的定位,比如position:relative或position:absolute及position:fixed,然后通过left定位它的父元素,位置通过left , top ,right ,规定bottom属性,

如果其父元素没有设置定位,那就要看其父元素的父元素是否有设置定位,

如果没有,继续向更高层次的祖先元素类推。简而言之,它的定位是第一个祖先元素,除了static定位,

如果所有的祖先元素都没有上述三个定位中的一个,那么它将定位与文档body相比(不是浏览器窗口,而是fixed)。