迷惑的position
小加发现实际开发中position使用频率很高,但很多人却对position不是很了解,导致开发中出现各种问题,现在让我门一起来看看这个迷惑的position吧~
static
元素未定位，默认出现在普通流中，即元素从左到右，从上到下的方式布局～
HTML
<div class="section">
<h3 class="section__title">Static - 普通流</h3>
<div class="section__boxes row text-center">
<div class="header-box col-xs-12">
header box
</div>
<div class="left-box col-xs-4">
left box
</div>
<div class="right-box col-xs-8">
right box
</div>
<div class="bottom-box col-xs-12">
bottom box
</div>
</div>
</div>
CSS
.section {
margin-bottom: 100px;
}
.section__boxes {
font-size: 22px;
}
.header-box {
background-color: #0981B2;
height: 100px;
}
.left-box {
background-color: #FF002D;
height: 200px;
}
.right-box {
background-color: #FFF419;
height: 200px;
}
.bottom-box {
background-color: #B037B2;
height: 100px;
}
效果图
relative
相对于该元素所在普通流的位置进行定位，现在我门让left box相对于其位置向右边移动100像素。
CSS
.section--relative > .left-box {
position: relative;
left: 100px;
}
效果图
对比static和relative两个效果图，你可以看到left box确实是相对于其所在正常流位置进行定位，向右移动了100像素。
absolute
相对于static定位以外的第一个父元素进行定位，即相对于第一个非处于正常流的父元素定位，现在我们将left box设置为absolute，并且向下移动1150像素。
CSS
.section--absolute > .left-box {
position: absolute;
top: 1150px;
}
效果图
由于查找left box的祖先元素中，未发现有设置非static的元素，其绝对定位是相对于根元素进行移动的。
relative和absolute对比
CSS
我们设置其父亲元素为relative，然后让其元素向下、右各移动100像素。
.section--absolute {
position: relative;
}
.section--absolute > .left-box {
position: absolute;
top: 100px;
left: 100px;
}
效果图
由于其父元素设置了relative，此时该元素是相对于其父亲进行定位的，而非根元素了～
我们再对比下relative和此时的效果图，你会发现left box的实现效果一致，但是right box却有一点不一样。这是因为当元素设置relative时，其元素依然会<mark>占据所在普通流的的位置</mark>，而absolute会<mark>脱离普通文档流</mark>，此时right box就往左边布局了。
fixed
不管浏览器内容怎么滚动等操作，都是相对于浏览器窗口进行定位，即固定位置。我门将元素固定在浏览器的顶部。
HTML
<div class="section">
<div class="section__boxes section-fixed row text-center">
<p>fixed - 固定位置 - 相对浏览器窗口定位</p>
</div>
</div>
CSS
.section-fixed {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #15FF44;
}
.section-fixed > p {
margin: 0;
}
效果图
你可以看到随着浏览器滚动，其元素的位置依然在浏览器窗口的顶部，未发生任何变化。
关键知识点
value description static 默认值。没有定位，元素出现在<mark>正常的流中</mark>（忽略 top, bottom, left, right 或者 z-index 声明）。 relative 生成相对定位的元素，<mark>相对于其正常位置</mark>进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 absolute 生成绝对定位的元素，<mark>相对于static定位以外</mark>的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，<mark>相对于浏览器窗口</mark>进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 inherit 规定应该从<mark>父元素继承</mark> position 属性的值。 w3school