关于定位position的理解

position属性可能的取值有下面几个，这篇文章主要记录了前4个的理解。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

一、static---静态定位

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

二、relative---相对定位

它与静态定位非常相似，占据在正常的文档流中，除了你可以通过使用top，bottom，left和right属性修改它的最终位置，包括让它与页面上的其他元素重叠。

形象一点说明：relative让一个元素变“活动”了，我们可以相对它原来的位置，更精确地把元素放到想放的位置；

举个例子：

HTML代码

CSS代码

相对定位前

相对定位后

<body>
<h1>Static positioning</h1>

<p>这是第一行没错这只是一个
用来对比的div元素</p>

<p class="positioned">
这是第二行设置为相对定位的元素
</p>

<p>这是第三行没错这只是一个
用来对比的div元素</p>

<p>这是第四行第四行第四行第
四行第四行</p>
</div>
</body>

body {
width: 370px;
margin: 0 auto;
}
p {
background: lightgray;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
background: lightgoldenrodyellow;

position: relative;

top: 30px;

left: 30px;

}

代码有点多。。看红字css导致的区别就好了！

三、absolute---决定定位

绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

决定定位也是要相对一个元素来定位的，这个元素成为定位的上下文

我们可以改变定位上下文——绝对定位的元素相对于其定位的元素。这是通过在元素的其他祖先之一上设置定位来实现的——它是嵌套在其中的元素之一（你不能相对于其中没有嵌套的元素来定位它）。

HTML代码

<body>
<h1>Absolute position</h1>
<p>月落乌啼霜满天</p>
<p class="positioned">江枫渔火对愁眠</p>
<p>姑苏城外寒山寺</p>
<p>夜半<span>钟</span> 声到<span> 客船</span></p>
</div>
</body》

CSS代码

body {
width: 250px;
margin: 0 auto;
}
p {
background: lightgray;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
background: lightgoldenrodyellow;
}

body {
width: 250px;
margin: 0 auto;
}
p {
background: lightgray;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: lightgoldenrodyellow;
}

body {
width: 250px;
margin: 0 auto;
border: 1px solid;
}
p {
background: lightgray;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
top:0;
left: 10px;
background: lightgoldenrodyellow;
}

效果

原始效果

该元素决定定位后，脱离了文档流

跟第二个相比增加了top、left属性的设置，于是该元素决定定位变了，现在是相对<html>，距离上面0，距离左边10px；

关于定位position的理解

猜你喜欢