您好,登錄后才能下訂單哦!
在談論如何使用時。我們先來看看CSS對position屬性的相關定義:
static:無特殊定位,對象遵循正常文檔流。top,right,bottom,left等屬性不會被應用。
relative:對象遵循正常文檔流,但將依據top,right,bottom,left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
absolute:對象脫離正常文檔流,使用top,right,bottom,left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
什么是文檔流? 文檔流是將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。只有三種情況會使得元素脫離文檔流,分別是:浮動、絕對定位和相對定位。
在實際開發當中,通常都是我們相對定位搭配絕對定位使用。例如下面偽代碼
<div class="content">
<div id="content_body1">
//圖片代碼塊
</div>
</div>
CSS
.content{
clear: left;
margin: 0 auto;
position: relative;
width: 990px;
}
.content_body1{
overflow: hidden;
position: absolute;
}
這里用兩個div包了一個圖片段代碼。外層div采用了相對定位,內層采用了絕對定位。 為什么這樣做呢? 這樣的好處是,先把圖片代碼塊固定在外層的div當中(<div class="content">),如果需要挪動圖片位置。直接操作外層的div即可。這樣就避免了直接挪動圖片影響了頁面的其它布局
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。