CSS入門指南-3：定位元素

時間 2019-11-16

標籤 css 入門指南定位元素欄目 CSS 简体版

原文原文鏈接

這是《CSS設計指南》的讀書筆記，用於加深學習效果。
前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。css

定位（position）

CSS 佈局的核心是 position 屬性，對元素盒子應用這個屬性，能夠相對於它在常規文檔流中的位置從新定位。
position 屬性有4個值：static、relative、absoulte、fixed，默認值爲 static。html

接下來我會用如下四個段落來逐個說明這些屬性是什麼意思。瀏覽器

<p id="first">First Paragraph</p>
<p id="Second">Second Paragraph</p>
<p id="specialpara">Third Paragraph</p>
<p id="fourth">First Paragraph</p>複製代碼

靜態定位（static）

咱們先看一下四個段落都採用靜態定位的效果。less

靜態定位下，每一個元素在處在常規文檔流中，它們都是塊級元素，因此會在頁面中自上而下地堆疊。佈局

相對定位（relative）

如今我把第三段的 position 屬性設置爲 relative。post

p#specialpara {
    position: relative;
    top: 25px;
    left: 30px;
}複製代碼

由於相對定位相對的是它原來在文檔流中的位置（默認位置），因此若是隻設置 position 樣式不會有任何變化。這裏我同時設置了 top 和 left 屬性來改變它的位置。學習

如今它的效果如圖所示：ui

如今，第三段從原來的元素（body）中掙脫了出來，與它在文檔中的默認位置相比向下移動了25像素，向右移動了30像素。spa

須要注意的是，除了這個元素本身相對於原始位置挪動了一下之外，頁面沒有任何改變。這個元素原來佔據的空間沒有動，其餘元素也沒動。設計

這時，若是不想第四段被它擋住，能夠給第四段設置一個 margin-top 值。

絕對定位（absoulte）

絕對定位跟靜態定位和相對定位相比，它會把元素完全從文檔流中拿出來。

咱們把 position 改成絕對定位看一下：

p#specialpara {
    position: absoulte;
    top: 25px;
    left: 30px;
}複製代碼

效果如圖：

能夠看到，第三段原來的位置被回收了。這說明絕對定位的元素脫離了常規文檔流，它如今是相對於頂級元素 body 在定位。

如今就涉及到一個概念：定位上下文，這個後邊說，先繼續看最後一種定位方式：固定定位。

盒子位移屬性是如何工做？

盒子的位移屬性有四個「top、right、bottom和left」，用來指定元素的定位位置和方向。這些屬性只能在元素的「position」屬性設置了「relative、absolute和fixed」屬性值，才生效。

對於相對定位元素，這些屬性的設置讓元素從默認位置移動。例如，top設置一個值「20px」在一個相對定位的元素上，這個元素會在原來位置向下移動「20px」。

對於絕對定位和固定定位，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對定位的元素設置一個「top」值爲「20px」，將使絕對定位元素相對於其設置了相對定位的祖先元素頂部邊緣向下移動「20px」，反之，若是設置一個「top」值爲「20px」，將使絕對定位元素相對於其設置了相對定位的祖先元素頂部邊緣向上移動「20px」。（絕對定位的參考點是其祖先元素設置了「relative」或者「absolute」值）。

事實上，一個相對定位元素同時設置了「top」和「bottom」位移屬性值，實際上「top」優先級高於「bottom」。然而，一個相對定位元素同時設置了「left」和「right」位移屬性，他們的優先級取決於頁面使用的是哪一種語言，例如，若是你的頁面是英文頁面，那麼「left」位移屬性優先級高，若是你的頁面是阿拉伯語，那麼「right」的位移屬性優先級高

固定定位（fixed）

固定定位與絕對定位相似，咱們先看下把定位改成相對定位的效果：

p#specialpara {
    position: fixed;
    top: 25px;
    left: 30px;
}複製代碼

效果如圖：

這樣看效果和絕對定位徹底一致，可是固定定位的定位上下文是瀏覽器窗口，她並不會隨頁面滾動。

如下是使用相對定位和固定定位的圖示：

固定頁頭和頁腳

固定定位最多見的一種用途就是在頁面中建立一個固定頭部、或者腳部、或者固定頁面的一個側面。就算是用戶移動瀏覽器的滾動條，仍是會固定在頁面。

如今咱們來看下定位上下文。

定位上下文

把元素的 position 屬性設定爲 relative、absolute或 fixed 後，可使用 top、right、bottom 和 left 屬性，相對於另外一個元素移動該元素的位置。這裏另外一個元素就是當前元素的定位上下文。

咱們在介紹絕對定位的時候說過，絕對定位元素默認的定位上下文是 body，這是由於 body 是標記中全部元素惟一的祖先元素。不過，若是把他相應的元素設定爲 relative，絕對定位元素的任何祖先元素均可以成爲它的定位上下文。

好比：

<body>
    <div id="outer">
      <div id="inner"> This is text for a paragraph to demonstrate contextual
        positioning. Here are two divs, one nested in the other. The inner div now
        has absolute positioning, so it positions itself relative to the default
        positioning context, body.</div>
    </div>
</body>複製代碼

css 樣式以下：

div#outer {
    width:250px; 
    margin:100px 40px; 
    border-top:3px solid red;
}
div#inner {
    top:10px; 
    left:20px; 
    background:#DDD;
}複製代碼

結果如圖：

這裏內部和外部的 div 都是是靜態定位，不存在誰是誰的定位上下文這個問題，因此 top 和 left 屬性並無生效。

下面咱們把內部 div 設定爲絕對定位，來看一下變化。

div#inner {
    top:10px; 
    left:20px; 
    background:#DDD;
}複製代碼

這是效果如圖：

這裏因爲定位上下文是 body，因此 top 和 left 都是相對於 body 的移動

這裏因爲不存在相對定位的其餘祖先元素能夠做爲定位上下文，絕對定位只能相對於 body 定位。

事實上，只要把元素的外邊距和內邊距設定好，多數狀況下使用靜態定位就能夠實現頁面佈局了。除非真正須要那麼作，不然不要輕易修改元素的 position 屬性。

如今咱們把外部 div 的 position 設置爲 relative：

div#outer {
    position: relative;
    width:250px; 
    margin:100px 40px; 
    border-top:3px solid red;
}複製代碼

外部 div 改成相對定位以後，後代中絕對定位的元素就會按照 top 和 left 屬性的設定，相對於外部 div 定位。此時內部 div的 top 和 left 屬性參照的就是外部 div。

最後咱們說一下和定位相關的顯示屬性。

顯示屬性

全部的元素都有display屬性。display 屬性有兩個最經常使用的值：block（塊級元素）和inline（行內元素）。

塊級元素：好比段落、標題、列表等，在瀏覽器中上下堆疊顯示。
行內元素：好比 a、span、和 img，在瀏覽器中左右並排顯示，只有前一行沒有空間時纔會顯示對下一行。

塊級元素和行內元素是能夠互相轉化的：

/*默認爲塊級元素*/
p {display: inline;}
/*默認爲行內元素*/
a {display: block;}複製代碼

display 還有一個屬性值：none。把display設置爲 none，該元素及全部包含在其中的元素，都不會在頁面中顯示。它們原來佔據的空間也會被回收
相對的屬性是 visibility，這個屬性經常使用的值是 visible（默認）和 hidden。把元素的 visibility 設定爲 hidden，元素會隱藏，但它佔據的空間仍然存在。

咱們上一篇 CSS入門指南-2：盒子模型、浮動和清除中提到的 clearfix 類就用到了這個屬性，在那裏咱們會添加一個塊級元素，而後把內容隱藏，以用來清除浮動。clearfix 的樣式以下：

.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }複製代碼

參考連接

最後，感謝女友支持。

歡迎關注(April_Louisa)	請我喝芬達
歡迎關注	請我喝芬達

相關標籤/搜索

每日一句

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