position定位详解

css中有三种定位：static、fixed、relative、absolute

• static是正常定位
• fixed 为固定定位 相对于浏览器窗口进行定位
• relative为 相对定位，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留
• absolute为绝对定位，相对于static定位以外的第一个有定位的祖先元素进行定位

<div class="header">haha</div>
<!-- fixed 相对于浏览器窗口进行定位 -->
<div class="fixed">
    fixed
</div>
<!-- relative 相对定位 相对于元素本身的位置进行定位，它原本所占的空间仍然会保留 -->
<div class="relative">
    relative
</div>
<!-- absolute 绝对定位，相对于static定位以外的第一个有定位的祖先元素进行定位 -->
<div class="absolute-box">
    <div class="absolute">
        absolute
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 500px;
    background-color: #03A9F4;
    color: #fff;
}

.fixed {
    position: fixed;
    top: 0;
    right: 0;
}

.relative {
    position: relative;
    top: 0;
    right: 0;
}

.absolute-box {
    position: relative;

}

.absolute-box .absolute {
    position: absolute;
    top: 0;
    right: 0;
}