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

paulquei 發布于2019-08-29 13:01 / 1918人閱讀

摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。

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

定位（position）

CSS 布局的核心是 position 屬性，對元素盒子應用這個屬性，可以相對于它在常規文檔流中的位置重新定位。
position 屬性有4個值：static、relative、absoulte、fixed，默認值為 static。

接下來我會用以下四個段落來逐個說明這些屬性是什么意思。

First Paragraph

Second Paragraph

Third Paragraph

First Paragraph

靜態定位（static）

我們先看一下四個段落都采用靜態定位的效果。

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

相對定位（relative）

現在我把第三段的 position 屬性設置為 relative。

p#specialpara {
    position: relative;
    top: 25px;
    left: 30px;
}

因為相對定位相對的是它原來在文檔流中的位置（默認位置），所以如果只設置 position 樣式不會有任何變化。這里我同時設置了 top 和 left 屬性來改變它的位置。

現在它的效果如圖所示：

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

需要注意的是，除了這個元素自己相對于原始位置挪動了一下以外，頁面沒有任何改變。這個元素原來占據的空間沒有動，其他元素也沒動。

這時，如果不想第四段被它擋住，可以給第四段設置一個 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，絕對定位元素的任何祖先元素都可以成為它的定位上下文。

比如：


    
       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.

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 定位。

事實上，只要把元素的外邊距和內邊距設定好，多數情況下使用靜態定位就可以實現頁面布局了。除非真正需要那么做，否則不要輕易修改元素的 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;
    }

參考鏈接

10步掌握CSS定位: position static relative absolute float

HTML和CSS高級指南之二——定位詳解

最后，感謝女朋友支持。

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

GPU云服務器云服務器元素定位如何用js給元素定位 css元素 css入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112307.html

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

摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

DesGemini 2019-08-01 17:15 評論0 收藏0
【零基礎入門】 css學習筆記（4）布局與定位介紹

摘要：內聯元素在水平方向上相互挨著，總體上會從左上方流向右下方。，增加元素，設置屬性，兩個內聯元素并排擺放，但只有左右方向有。還能與其它內聯元素并排。寫在前面：作為一個剛開始寫技術博客的新手，看到有人收藏了文章，寫作動力又猛增了。這應該就是寫技術博客的好處之一：能給自己增加成就感和驅動力。最近關于css布局和定位相關內容整理地有點慢，因為同時在做freecodecamp上的題，所以節奏有點...

nevermind 2019-08-30 15:53 評論0 收藏0
Python2+Selenium入門03-元素定位

當我們想讓 Selenium 自動地操作瀏覽器時，就必須告訴 Selenium 如何去定位某個元素或一組元素，每個元素都有著不同的標簽名和屬性值，Selenium 提供了以下8種定位元素的方式，每種方式對應了2個方法：find_element_by_( )，是用來定位單個元素的，find_elements_by_( )，是用來定位多個元素的。通過 id 定位通過 name 定位通過 cla...

Hydrogen 2019-07-31 10:06 評論0 收藏0
CSS 設計指南學習筆記二

摘要：原文地址本篇文章是筆者的設計指南學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對設計指南進行一些總結，沒有看之前第一部分的話也可以從這里傳送過去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的《CSS 設計指南》學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對 ...

printempw 2019-08-30 12:47 評論0 收藏0
CSS進階指南

摘要：二正文脫離文檔流脫離文檔流的元素都是塊級元素。參考資料什么是文檔流指語言文本從左到右，從上到下顯示，這是傳統文檔的文本布局。定位不脫離文檔流，設置沒有作用，對敏感。允許指定負的外邊距值。一前言要想掌握CSS部分的內容其實并不容易，盡管你已經閱讀過相當多的關于CSS的書籍，但是還是免不了去網上搜索相關的知識擴大你對CSS內容的掌握。在網絡上查找最好的地方當然是CSS官網文檔，不過英...

SolomonXie 2019-08-29 14:18 評論0 收藏0