[css定位]position詳解（absolute、fixed、relative、static）

時間 2020-03-02

標籤 css 定位 position 詳解 absolute fixed relative static 欄目 CSS 简体版

原文原文鏈接

文章參考：郭佬的博客文章，原文點此css

文檔流佈局的概念

將窗體自上而下分紅一行行，並在每行中按從左至右的順序排放元素，即爲文檔流。
每一個非浮動塊級元素都獨佔一行，浮動元素則按規定浮在行的一端。若當前行容不下，則另起新行再浮動。
內聯元素也不會獨佔一行。幾乎全部元素(包括塊級，內聯和列表元素）都可生成子行，用於擺放子元素。
有三種狀況將使得元素脫離文檔流而存在，分別是浮動，絕對定位，固定定位。可是在IE6中浮動元素也存在於文檔流中。html

內容總結

absolute瀏覽器

生成絕對定位的元素，相對於 static（position默認值）定位之外的第一個父元素進行定位。ide

元素的位置經過「left」, 「top」, 「right」以及「bottom」屬性進行規定。脫離文檔流不佔空間佈局

fixed網站

生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置經過「left」, 「top」, 「right」以及「bottom」屬性進行規定。ui

（聯想網站右上角的logo，滾動瀏覽器窗口時不會改變位置，脫離了文檔流）spa

relative
生成相對定位的元素，相對於其正常位置進行定位。
所以，」left:20」會向元素的 LEFT 位置添加 20 像素。脫離文檔流，佔空間3d

static
默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。code

inherit
規定應該從父元素繼承 position 屬性的值。
static 默認值，就是沒有定位。inherit 繼承父元素，基本上這個參數用得至關少。

1、absolute

不爲元素預留空間，經過指定元素相對於最近的非 static 定位祖先元素的偏移，來肯定元素位置。絕對定位的元素能夠設置外邊距（margin），且不會與其餘邊距合併。

我的理解：生成絕對定位的元素，其相對於 static 定位之外的第一個父元素進行定位,會脫離normal flow。注意：是除了static外

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>static</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
    <style>
        .container{
            background-color: #CDE7EB;
            width: 50%;
            height: 300px;
            margin-top: 10px;
        }
        .content{
            background-color: #ADDCC8;
            width: 50%;
            height: 100px;
            position:absolute;       
            top: 100px; 
            left:50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <p>由於 content 的父元素 container 沒有設置 position，默認爲 static，因此找到的第一個父元素是 body（<body></body>），能夠當作是元素（content）相對於 body 向下移動100px。向右移動50px</p>
        </div>
    </div>
    
</body>
</html>

position_absolute

2、fixed

不爲元素預留空間，而是經過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。

打印時，元素會出如今的每頁的固定位置。fixed屬性會建立新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改成該祖先。

我的理解：fixed相對於window固定，滾動瀏覽器窗口並不會使其移動，會脫離normal flow。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>static</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
    <style>
        .container{
            background-color: #CDE7EB;
            width: 70%;
            height: 1000px;
        }
        .content{
            background-color: #ADDCC8;
            width: 70%;
            height: 100px;
            position:fixed;  
            top:50px;     
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <p>不管滾動條怎麼滾，我就在這個位置</p>
        </div>
    </div>
    
</body>
</html>

position_fixed

三、relative

該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面佈局的前提下調整元素位置（所以會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。

我的理解：相對於normal flow中的原位置來定位。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>relative</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
    <style>
        .container {
            background-color: #CDE7EB;
            width: 50%;
            height: 300px;
        }

        .content_0 {
            background-color: #ADDCC8;
            width: 50%;
            height: 100px;
        }

        .content_1 {
            background-color: #DCEBC4;
            width: 50%;
            height: 100px;
            position: relative;
            /* left:20px;
            top:20px; */
        }

        p{
            display: inline;
        }

        .content_2{
            background-color: #FED2B7;
            width: 50%;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content_0">
        </div>
        <div class="content_1">
            <p>此時個人left right top bottom未設置值</p>
        </div>
        <div class="content_2">
        </div>
    </div>

</body>

</html>

position_relative

四、static

該關鍵字指定元素使用正常的佈局行爲，即元素在文檔常規流中當前的佈局位置。此時 top、right、bottom、left 屬性無效。

我的補充：static是position的默認值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>static</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
    <!-- <link rel="stylesheet" href="./styles/reset.css"> -->
    <style>
        .container{
            background-color: #CDE7EB;
            width: 50%;
            height: 300px;
        }
        .content{
            background-color: #ADDCC8;
            width: 50%;
            height: 100px;
            position: static;/* 該關鍵字指定元素使用正常的佈局行爲，即元素在文檔常規流中當前的佈局位置。此時 top、right、bottom、left 屬性無效。 */       
            left: 10px;  /*static狀況下，此屬性不起做用*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <p>對 content 的 position 設定 static 後，left就失效了，而元素（content）就以正常的 normal flow 形式呈現。</p>
        </div>
    </div>
    
</body>
</html>

position_static

相關標籤/搜索

每日一句

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