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;
}