Position定义： position 属性规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
在介绍postion值之前先给大家介绍一下 z-index的使用，它可被用于将在一个元素放置于另一元素之后，决定了一个HTML元素层叠级别。元素层叠级别是相对于元素在Z轴上（X轴与Y轴的平面相垂直相的平面）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部(值越大越在上层，可以允许有负数值)。
absolute(绝对定位)： 脱离了文本流（即在文档中已经不占据位置），absolute在没有设定TRBL值时是根据父级对象（此对象定位必须为脱离文档流的定位，否则就以body为其父元素）的坐标作为始点的(图1)，当设定TRBL值后则根据浏览器的左上角作为原始点(图2)。
relative（相对定位）：相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。
fixed(固定定位)： 元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
<style>
#child{
width: 200px;
height: 200px;
background: #0099FF;
position: fixed;
left: 200px;
top: 200px;
}
#parent{
width: 400px;
height: 2200px;
background: red;
margin-top: 200px;
margin-left: 200px;
position: absolute;
}
</style>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
过程一
过程二 
从上面的两个过程中可以看出fixed是相对于浏览器的窗口进行定位。
inherit(继承定位)：规定应该从父元素继承 position 属性的值。
#child{
width: 200px;
height: 200px;
background: #0099FF;
position: inherit;
left: 100px;
top: 100px;
}
#parent{
width: 400px;
height: 2200px;
background: red;
margin-top: 200px;
margin-left: 200px;
position: absolute;
}
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
从父元素那儿继承了absolute属性，使得child相对于父元素left: 100px;
top: 100px;
initial(还原定位): initial的作用是把属性设置回默认值。
static(静态定位)：如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他值。
原文地址：https://www.cnblogs.com/daydayupyxq/p/8586553.html
时间： 2024-10-12 00:34:34