前端复习--css position属性

最新推荐文章于 2025-03-03 20:44:07 发布

翻译最新推荐文章于 2025-03-03 20:44:07 发布 · 404 阅读

本文详细解析了 CSS 中 position 属性的使用技巧，包括 static、relative、absolute 和 fixed 的特点及区别。通过实例展示了不同定位方式的效果，并解释了绝对定位元素如何参照父元素进行定位。

1.position的absolute与fixed共同点与不同点

相同点：（1）改变行内元素的呈现方式，display被置为block。（2）都脱离了文档流，不占据空间（3）默认会覆盖到文档流的上方

不同点：（1）absolute相对于定位了的父元素,fixed相对于浏览器窗口定位，滚动页面，元素相对于浏览器窗口的位置不变

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

以下内容来自博客http://www.cnblogs.com/coffeedeveloper/p/3145790.html的分享！

position: absolute忽略根元素的padding。

<div id="a" style="background: #fff; width: 200px;">A
    <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">A - 1
        <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">A - 2
        </div>
    </div>
</div>

1）元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

2）元素同时应用了position: absolute及float属性，则float失效。

position:absolute; 与float属性一样都会脱离文档流，这就带来一个相同效果；它们的包含元素的高度会坍塌为0；对于float属性可以清除浮动；

同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。

position:absolute 还有坑没有踩平！！！！

即如果绝对定位元素申明了置入值，那么其置入值的参照物即为最近的申明了"position"为"absolute\relative\fixed的祖先元素。注意这里是置入值的参照物。

如果绝对定位元素没有申明置入值，只申明了position:absolute，那么其自身定位以及margin的参照物即为其最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的内容框。

如果同时申明了置入值和margin值呢？看如下代码：
<div style=" width:500px; height:500px; background:#000; margin-left:200px;"><div style="position:absolute; left:200px; margin-left:100px; background:#F00; width:50px; height:50px;"></div></div>
你会发现元素本身距其包含块（这里是body，跟LZ DEMO一个性质）的距离是margin-left+left=300px 。