css之position(定位)的理解

最新推荐文章于 2021-08-20 22:53:51 发布

转载最新推荐文章于 2021-08-20 22:53:51 发布 · 114 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mogu-xiaonao/p/5380603.html

本文详细解析了CSS中的四种定位方式：static、relative、fixed和absolute的特点及应用。static为默认定位方式，relative为相对于自身位置偏移，fixed为相对于浏览器窗口固定位置，而absolute则根据最近的已定位父元素定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中的position（定位）有四个属性，比较容易搞混，这里做一个小结来区分方便以后的使用。

position的四个属性值：1.static 2.fixed 3.relative 4.absolute

1.static定位：position的默认值，一般不设置position属性时，元素会按照正常的文档流进行排列。静态定位的元素不会受到top, bottom, left, right影响。

2.relative： 相对于本身的位置进行偏移（static定位下的元素位置为本身的位置，因为static不受top, bottom, left, right的影响），所以会发生与其他元素重叠的情况，但原本所占的空间不会改变（即static和relative在文档流中，与fixed和absolute相反）。相对定位元素经常被用来作为绝对定位元素的容器块。

3.fixed定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会随之移动。fixed定位使元素的位置与文档流无关，因此不占据空间。会与其他元素重叠。（总之，fixed是特殊的absolute）

4.absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，即浏览器窗口。这句话可以做以下详解：　　　　<div id="parent">
　<div id="sub1">sub1</div>
<div id="sub2">sub2</div></div> 　　　当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：
　　(1).当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。
　　注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了 margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。
　　(2)如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位。

　　绝对定位的元素位置与文档流无关，与fixed一样，不占据空间。（只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的））。

转载于:https://www.cnblogs.com/mogu-xiaonao/p/5380603.html