【CSS學習】--- position屬性

時間 2019-11-24

標籤 CSS學習 position 屬性欄目 CSS 简体版

原文原文鏈接

1、前言

　　1.HTML中的三種佈局方式：

標準流（普通流）：網頁中默認的佈局方式，即順序佈局
浮動：float
定位：position

　　2.position屬性的做用方式：

給position屬性設置相應的值，可以使元素脫離正常的標準流，而且可使用top、right、left、bottom屬性對元素進行定位，還可使用z-index屬性對元素的層疊順序進行更改
position的五個屬性值：static、relative、absolute、fixed、inherit

爲方便，top、right、left、bottom屬性簡寫爲TRLBcss

2、介紹position的五個屬性值

　　1.static：默認值，無定位

元素顯示在正常的標準流中，而且忽略TRLB以及z-index屬性的設置
至關於沒有設置position屬性

　　2.absolute:生成絕對定位元素

可使用TRLB對元素進行定位,也可以使用z-index更改元素的層疊順序
相對於 static 定位之外的第一個父元素進行定位,脫離了正常的標準流,而且不佔用標準流空間

舉個栗子:html

　　將div標籤的position設置爲absolute瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .absolute{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <p>你好</p>    
    <div class="absolute"></div>
</body>
</html>

　　瀏覽器顯示:ide

　　經過頁面顯示咱們發現,設置爲absolute的絕對定位元素div,不顧處於標準流中的p標籤的存在,仍然顯示在了top:0px; left:0px;位置,佈局

　　從中咱們也能夠看出絕對定位元素脫離了正常的標準流spa

　　3.relative：生成相對定位元素

可使用TRLB對元素進行定位,也可以使用z-index更改元素的層疊順序
雖然該元素的位置發生了移動，但相對定位元素仍然處於正常的標準流中,所佔據的空間是未生成定位元素以前它所佔據的空間，而不是移動以後所佔據的空間
使用TRLB對元素進行定位時,不能破壞也沒法破壞正常的標準流
相對於原來正常時的位置進行定位

舉個栗子:code

　　將div標籤的position設置爲relativehtm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>relative</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .relative{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: relative;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <p>你好</p>    
    <div class="relative"></div>
</body>
</html>

　　瀏覽器顯示:blog

　　咱們發現,設置爲relative的相對定位元素div,受標準流中的p標籤的約束,顯示在了p標籤的下方,由於它是相對於在標準流中原來的位置進行定位的.繼承

經過下面兩個栗子來對比相對定位和絕對定位　

絕對定位absolute

<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; position: absolute; margin: 0 auto;"></div> 
</div>

相對定位relative

<div style="width: 240px; height: auto; border: solid 1px black;">
    <div style="width: 80px; height: 80px; background-color: red; position: relative; margin: 0 auto;"></div> 
</div>

咱們發現：1. 相對定位元素能夠爲父元素撐起高度，而絕對定位元素卻會形成父元素塌陷，也說明了相對定位元素沒有脫離標準流，而絕對定位元素脫離了標準流。

　　　　　 2.未脫離標準流的元素能夠經過設置margin-left和margin-right爲auto，來使塊級元素水平居中。

　　4.fixed:也是生成絕對定位元素

可使用TRLB對元素進行定位,也可以使用z-index更改元素的層疊順序
相對於瀏覽器窗口進行定位,脫離了正常的標準流,而且不佔用標準流空間
當頁面滾動時，元素固定不動

舉個栗子:

　　給position設置爲relative的div標籤,加一個position設置爲relative的父標籤,觀察fixed是否受具備position的父標籤影響,做爲對比咱們再加上一個屬性值爲absolute的div標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .fixed{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: fixed;
            top: 0px;
            left: 0px;
        }
        .absolute{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            position: absolute;
            top: 0px;
            left: 0px;            
        }
        .pre{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            position: relative;
            top: 100px;
            left: 100px;            
        }
    </style>
</head>
<body>
    <div class="pre">
        <div class="fixed"></div>
        <div class="absolute"></div>        
    </div>
</body>
</html>

　　網頁顯示:

　　咱們發現,屬性值爲fixed的子標籤並不受具備position屬性的父標籤影響,脫離了來父標籤的約束,相對於瀏覽器窗口顯示在top:0px; left:0px;位置.

　　而屬性值爲absolute的子標籤卻受着具備position屬性的父標籤約束,相對於position爲relative的父元素顯示在了top:0; left:0;位置,這也是fixed與absolute的一個重要區別。

　　5.inherit:繼承

從父標籤繼承position屬性值

舉個栗子:

　　對於父div標籤咱們設置position:fixed,對於子div標籤咱們設置position:inherit,觀察子標籤是否會繼承父標籤的position屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inherit</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .pre{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            position: fixed;
            top: 100px;
            left: 100px;            
        }
        .inherit{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: inherit;
            top: 0px;
            left: 0px;            
        }
    </style>
</head>
<body>
    <div class="pre">
        <div class="inherit"></div>        
    </div>
</body>
</html>

　　瀏覽器顯示:

　　咱們發現,子標籤具備和父標籤一樣的position屬性值---fixed,子標籤的fixed使它顯示在了相對於瀏覽器窗口進行定位的top:0px; left:0px;位置

3、總結與補充

　　1.關於relative的補充

經過上面介紹發現relative並未使元素脫離正常的標準流,所以元素仍受標準流的約束(包括其它元素以及自身的外邊距和內邊距)
而脫離了標準流(具備absolute,fixed屬性值)的元素,則不受標準流的約束,不受其它元素內外邊距的約束,但自身的內外邊距會對自身產生約束
不管相對定位元素定位在哪裏，它都一直佔有原來位置上的文檔流，而絕對定位元素真正的脫離了文檔流，再也不佔用原來的位置

關於前兩點舉個栗子

　　給body標籤設置內邊距和外邊距,觀察相對定位元素和絕對定位元素的顯示狀況

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inherit</title>
    <style type="text/css">
        body{
            margin: 10px;
            padding: 10px;
        }
        .relative{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: relative;
            top: 0px;
            left: 0px;            
        }
        .absolute{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            position: absolute;
            top: 0px;
            left: 0px;            
        }
    </style>
</head>
<body>
    <div class="relative"></div>
    <div class="absolute"></div>
</body>
</html>

　　網頁顯示:

　　咱們發現元素:<div class="relative"></div>受body標籤內外邊距的影響,顯示在了元素:<div class="absolute"></div>的右下方

關於第三點再舉個栗子

　　咱們將中間的div設置爲relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .yellow{
            width: 100px;
            height: 100px;
            background-color: yellow;    
        }
        .relative_red{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left: 200px;
        }
        .black{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="yellow"></div>
    <div class="relative_red"></div>
    <div class="black"></div>
</body>
</html>

　　網頁顯示：

　　爲了對比，咱們將中間div的relative改成absolute：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .yellow{
            width: 100px;
            height: 100px;
            background-color: yellow;    
        }
        .absolute_red{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 200px;
        }
        .black{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="yellow"></div>
    <div class="absolute_red"></div>
    <div class="black"></div>
</body>
</html>

點擊查看修改以後的代碼

　　網頁顯示：

　　咱們發現，設置position:relative的div在原來的文檔流上，仍然佔有空間，而設置position:absolute的div在文檔流上再也不佔有空間

　　2.關於絕對定位元素的補充

使用position屬性生成絕對定位元素後（position值爲 absolute 或 fixed），該元素同時也會變成一個塊狀元素，不管它以前是什麼類型

慄如：

　　未設置position的<span>標籤

<span style="width: 100px; height: 100px; background-color: red"></span>

　　儘管給它加了width和height屬性，但它仍是做爲內聯元素，width和height屬性無效，因此網頁顯示空白

　　添加position:absolute生成絕對定位元素以後

<span style="width: 100px; height: 100px; background-color: red;position: absolute;"></span>

　　<span>標籤同時變成了塊狀元素

　　3.top,right,left,bottom屬性

top屬性值是指,將元素定位到距離相對位置頂端的距離
right屬性值是指,定位到距離相對位置右端的距離
left屬性值是指,定位到距離相對位置左端的距離
bottom屬性值是指,定位到距離相對位置底端的距離
屬性值均可爲負數,表示朝反方向定位

　　4.z-index屬性

由於先寫的定位元素會被後寫的定位元素覆蓋,所以咱們須要設置定位元素的堆疊順序,是其按照咱們想要的覆蓋方式進行顯示

z-index屬性用來設置元素的堆疊順序,擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。
z-index屬性僅能在具備定位屬性的元素上奏效
當z-index爲負值時該元素會被標準流中的元素覆蓋

舉個大栗子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .red{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 5;            
        }
        .black{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 3;            
        }
        .blue{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 0px;
            right: 0px;        
            z-index: -1;
        }
        .no-position-yellow{
            width: 1500px;
            height: 1000px;
            background-color: yellow;            
        }
    </style>
</head>
<body>
    <div class="no-position-yellow"></div>
    <div class="red"></div>
    <div class="black"></div>
    <div class="blue"></div>
</body>
</html>