在开发中,定位分为4种:relative、absolute、fixed、static。
所有元素默认都是static。
那么到底什么是定位呢?我们先来写个例子:
这里,我定义了3个div,分别上了不同的背景色,然后给他们加上了不同的定位,我们来看一下效果:
注意,我在这里拉动了浏览器右边的滚动条,由于屏幕太大,所以没有录制进去。
position:fixed
其实fixed和absolute是一样的,唯一的区别在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置。
即使窗口是滚动的它也不会移动:
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素和其他元素重叠。
IE6不支持CSS中的position:fixed属性
position:absolute
将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。
position:relative
相对定位元素的定位是相对自己原本的正常位置。依据left,right,top,bottom等属性在正常文档流中偏移位置。可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
这4种定位都有共同属性:left,top,bottom,right,通过设置这4种属性可以定位与相呼应元素的距离。还有一个属性z-index,z-index是设置定位层的堆叠顺序,该属性必须结合定位才有作用,z-index的值越大,堆叠的层就越前面。
那么,介绍完4种属性,我们来看一下如何结合起来使用呢?首先,我们来定义一个div,之后在div里放一个position:absolute的div:
效果如下:
我们会发现,position:absolute的div并没有以他的父级div为父元素,而是把当做了父元素来进行left 和 top的移动。接下来,我们把他的父级div加上position:relative:
效果如下:
我们会发现,这个时候,里面的position:absolute的div已经不以来作为父元素了,而是根据被加入了position:relative的div作为父元素。那么如果把这个父元素改为position:absolute呢?
效果如下:
同样的,子div仍旧将父类div作为父元素。
接下来,我们来试一下position:fixed,最后得出了一样的结果。
由此可以得出,position:absolute会向上找到有position定位的元素作为父元素。并根据父元素的位置进行绝对定位的移动。如果没有找到任何position的元素,那么position:absolute将作为父元素进行定位。posiiton:fixed不受任何position元素的影响,只将作为父元素。
position定位的解说
最新推荐文章于 2022-09-08 10:45:31 发布