css绝对定位和相对定位

左手的ㄟ右手 2022-09-21 05:43 311阅读 0赞

**定位的专业解释**

**（1）语法**

position : static | absolute | fixed | relative  
** ( 2 ) 说明**  
从上面语法可以看出，定位的方法有很多种，它们分别是静态（static），绝对定位（absolute），固定(fixed)，相对定位（relative）。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位（absolute）、相对定位（relative）。

**绝对定位（absolute）：**将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值。

position: absolute;绝对定位：绝对定位是相对于元素**最近的已定位的祖先元素（**即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于**最初的包含块（body）**。

绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。

\#box\_relative \{  
  position: absolute;  
  left: 30px;  
  top: 20px;  
\}

![Center][]

**相对定位（relative）：**对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

position: relative;相对定位：相对定位是相对于元素在文档中的**初始位置**；

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

\#box\_relative \{  
  position: relative;  
  left: 30px;  
  top: 20px;  
\}

![Center 1][]

注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的。

参考出处：[http://blog.163.com/amy0713@126/blog/static/13704853720118682245526/][http_blog.163.com_amy0713_126_blog_static_13704853720118682245526]

[Center]: /images/20220721/007b4acef5c249ca922ea8f22b0b833a.png
[Center 1]: /images/20220721/7953d50c158b49d48660826fbebd194d.png
[http_blog.163.com_amy0713_126_blog_static_13704853720118682245526]: http://blog.163.com/amy0713@126/blog/static/13704853720118682245526/