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

paulquei 發(fā)布于2019-08-29 13:01 / 1926人閱讀

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

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

定位（position）

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

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

First Paragraph

Second Paragraph

Third Paragraph

First Paragraph

靜態(tài)定位（static）

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

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

相對定位（relative）

現(xiàn)在我把第三段的 position 屬性設(shè)置為 relative。

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

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

現(xiàn)在它的效果如圖所示：

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

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

這時，如果不想第四段被它擋住，可以給第四段設(shè)置一個 margin-top 值。

絕對定位（absoulte）

絕對定位跟靜態(tài)定位和相對定位相比，它會把元素徹底從文檔流中拿出來。

我們把 position 改為絕對定位看一下：

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

效果如圖：

可以看到，第三段原來的位置被回收了。這說明絕對定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對于頂級元素 body 在定位。

現(xiàn)在就涉及到一個概念：定位上下文，這個后邊說，先繼續(xù)看最后一種定位方式：固定定位。

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

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

對于相對定位元素，這些屬性的設(shè)置讓元素從默認(rèn)位置移動。例如，top設(shè)置一個值“20px”在一個相對定位的元素上，這個元素會在原來位置向下移動“20px”。

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

事實上，一個相對定位元素同時設(shè)置了“top”和“bottom”位移屬性值，實際上“top”優(yōu)先級高于“bottom”。然而，一個相對定位元素同時設(shè)置了“l(fā)eft”和“right”位移屬性，他們的優(yōu)先級取決于頁面使用的是哪種語言，例如，如果你的頁面是英文頁面，那么“l(fā)eft”位移屬性優(yōu)先級高，如果你的頁面是阿拉伯語，那么“right”的位移屬性優(yōu)先級高

固定定位（fixed）

固定定位與絕對定位類似，我們先看下把定位改為相對定位的效果：

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

效果如圖：

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

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

固定頁頭和頁腳

固定定位最常見的一種用途就是在頁面中創(chuàng)建一個固定頭部、或者腳部、或者固定頁面的一個側(cè)面。就算是用戶移動瀏覽器的滾動條，還是會固定在頁面。

現(xiàn)在我們來看下定位上下文。

定位上下文

把元素的 position 屬性設(shè)定為 relative、absolute或 fixed 后，可以使用 top、right、bottom 和 left 屬性，相對于另一個元素移動該元素的位置。這里另一個元素就是當(dāng)前元素的定位上下文。

我們在介紹絕對定位的時候說過，絕對定位元素默認(rèn)的定位上下文是 body，這是因為 body 是標(biāo)記中所有元素唯一的祖先元素。不過，如果把他相應(yīng)的元素設(shè)定為 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;
}

結(jié)果如圖：

這里內(nèi)部和外部的 div 都是是靜態(tài)定位，不存在誰是誰的定位上下文這個問題，所以 top 和 left 屬性并沒有生效。

下面我們把內(nèi)部 div 設(shè)定為絕對定位，來看一下變化。

div#inner {
    top:10px; 
    left:20px; 
    background:#DDD;
}

這是效果如圖：

這里由于不存在相對定位的其他祖先元素可以作為定位上下文，絕對定位只能相對于 body 定位。

事實上，只要把元素的外邊距和內(nèi)邊距設(shè)定好，多數(shù)情況下使用靜態(tài)定位就可以實現(xiàn)頁面布局了。除非真正需要那么做，否則不要輕易修改元素的 position 屬性。

現(xiàn)在我們把外部 div 的 position 設(shè)置為 relative：

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

外部 div 改為相對定位之后，后代中絕對定位的元素就會按照 top 和 left 屬性的設(shè)定，相對于外部 div 定位。此時內(nèi)部 div的 top 和 left 屬性參照的就是外部 div。

最后我們說一下和定位相關(guān)的顯示屬性。

顯示屬性

所有的元素都有display屬性。display 屬性有兩個最常用的值：block（塊級元素）和inline（行內(nèi)元素）。

塊級元素：比如段落、標(biāo)題、列表等，在瀏覽器中上下堆疊顯示。

行內(nèi)元素：比如 a、span、和 img，在瀏覽器中左右并排顯示，只有前一行沒有空間時才會顯示對下一行。

塊級元素和行內(nèi)元素是可以互相轉(zhuǎn)化的：

/*默認(rèn)為塊級元素*/
p {display: inline;}
/*默認(rèn)為行內(nèi)元素*/
a {display: block;}

display 還有一個屬性值：none。把display設(shè)置為 none，該元素及所有包含在其中的元素，都不會在頁面中顯示。它們原來占據(jù)的空間也會被回收
相對的屬性是 visibility，這個屬性常用的值是 visible（默認(rèn)）和 hidden。把元素的 visibility 設(shè)定為 hidden，元素會隱藏，但它占據(jù)的空間仍然存在。

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

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

參考鏈接

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

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

最后，感謝女朋友支持。

歡迎關(guān)注(April_Louisa)	請我喝芬達(dá)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112307.html

發(fā)表評論

登陸后可評論

0條評論

paulquei

男|高級講師

我要關(guān)注我要私信

TA的文章

Skywalking IoTDB存儲插件設(shè)計說明

閱讀 2349·2021-09-30 09:47
2019年4月所遇知識點整理

閱讀 2966·2019-08-30 11:05
css實現(xiàn)單行、多行文本超出顯示省略號

閱讀 2537·2019-08-29 17:20
CSS入門指南-3：定位元素

閱讀 1927·2019-08-29 13:01
JavaScript聲明變量詳解

閱讀 1735·2019-08-26 13:39
SVG vs Image, SVG vs Iconfont

閱讀 1265·2019-08-26 13:26
fc-whiteboard，支持鏡像、錄播、回放的 Web 電子白板

閱讀 3220·2019-08-23 18:40
Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍

閱讀 1836·2019-08-23 17:09

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章