一步一圖剖析CSS中的position定位

時間 2019-11-13

標籤一步剖析 css position 定位欄目 CSS 简体版

原文原文鏈接

在CSS佈局上float和position是永遠說不完的道不盡的話題,它們的應用五花八門,組合技巧千奇百怪.一般若是你不是一個很熟練的Csser,那麼你對與position確定仍是隻知其一;不知其二,好比說我本身... html

position的屬性值你們應該是很熟悉的,static,absolute,relative,fixed. 佈局

這裏作個demo,一步步詳解position. ui

(1) 準備一些div,只加上背景色去區分它們,以下圖. spa

代碼: 3d

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#example {
    float: right;
}
 
#example p {
    margin: 0 0.25em;
    padding: 0.25em 0;
}
#div-top,
#div-footer {
    background-color: #88d;
    color: #000;
}

#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
}

#div-1-padding {
    padding: 10px;
}

#div-1a {
    background-color: #d33;
    color: #fff;
}

#div-1b {
    background-color: #3d3;
    color: #fff;
}
 
#div-1c {
    background-color: #33d;
    color: #fff;
}  
</style>
</head>
<body>
<div id="example">               
    <div id="div-top">
        <p>id = div-top</p>
    </div>
    <div id="div-1">
        <div id="div-1-padding">
            <p>id = div-1</p>
            <div id="div-1a">
                <p>id = div-1a</p>
                <p>這是div-1的子div,div-1a.</p>
            </div>
            <div id="div-1b">
                <p>id = div-1b</p>
                <p>這是div-1的子div,div-1b.</p>
            </div>
            <div id="div-1c">
                <p>id = div-1c</p>
                <p>這是div-1的子div,div-1c.</p>
            </div>
        </div>
    </div>
    <div id="div-footer">
        <p>id = div-footer</p>
    </div>
</div>
</body></html>

(2) 首先是static,這個屬性是position的默認屬性.這裏很少說了,由於一般設置position:static;的狀況都是取消定位的.

(3) relative 是相對定位,這個相對指的是元素的正常位置,就是相對於你不加position:relative;的狀況進行了如何的偏移.加完這個屬性能夠經過top,left,bottom,right進行位移設置.若是沒有設置這些位移僅僅設置position:relative;那麼元素位置不會有任何變化. code

須要注意的是設置爲relative的元素,它默認佔有的空間還會繼續被該元素佔有,同時它不會影響其餘相鄰元素. htm

#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
    position: relative;
    top: 10px;
    left: -20px;
}

修改後效果如圖:

(4) absolute 是絕對定位,這個屬性絕對是position的精髓所在.絕對定位元素會脫離文檔流,整個文檔會當作它不存在同樣去排版,而且它原先所佔有的空間也不會存在. utf-8

#div-1a {
    background-color: #d33;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 20px;    
}

這時以前最外層div的float對於div-1a不起做用了,而後它相對於最外層標籤html定位了,而且它原先的位置被下面的元素佔用了.

上面之因此div-1a是相對於html定位是在必定條件下得,並非通用的.只有在絕對定位的任何祖先元素都沒有設置position值爲relative或absolute的狀況下,它纔會比照html進行定位. 文檔

若是話被這麼說了,那麼能夠聯想到relative+absolute這樣的組合必定會產生別的結果. it

若是一個元素被絕對定位,那麼先在離本身最近的元素中看有沒有相對定位的元素,若是有則以此爲參照物.若是沒有則追溯祖先元素中有沒有相對定位的元素.

(5) relative + absolute = absolute以relative定位.

修改代碼:

#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
    position:relative;
}

#div-1-padding {
    padding: 10px;
}

#div-1a {
    background-color: #d33;
    color: #fff;
    position: absolute;
}

將div-1加上relative,而後去掉div-1a的top和left.看效果:

能夠看到div-1a覆蓋了一部分的div-1b,大約一半左右.它變成相對於div-1定位了,而不是html.

(6) position佈局

經過relative+absolute就能夠實現一些佈局效果.

#div-1 {
    width: 400px;
    background-color: #000;
    color: #fff;
    position:relative;
}

#div-1-padding {
    padding: 10px;
}

#div-1a {
    background-color: #d33;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#div-1b {
    background-color: #3d3;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;s
}

能夠看到div-1a和div-1b的佈局,相對於div-1而且忽略了div-1的padding屬性.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。