css定位屬性的應用

時間 2020-03-01

標籤 css 定位屬性應用欄目 CSS 简体版

原文原文鏈接

在css當中，有一個很是重要且經常使用的屬性，這個屬性就是定位屬性！css

定位屬性（position），它的做用是檢索或者設置元素的定位方式，也就是一個改變元素位置的屬性。它有五個經常使用的屬性值：static/ absolute/ relative/ fixed/ stickyhtml

在進行元素定位的時候，有如下幾個步驟：瀏覽器

給元素添加position屬性，證實該元素要作位置的變化。
肯定參照物！經過position的屬性值來肯定。
肯定座標，利用：left/ right/ top/ bottom

下面就來說講position各屬性值：spa

一、static（靜態定位）：這是position的默認值，默認文本流的狀態，它不會識別left/ right/ top/ bottom指定的座標，因此我就不過多解釋。code

二、absolute（絕對定位）：htm

a : 參照物：按照已經有定位的父元素進行位置的變化。
b : 假如當前沒有父元素或者父元素沒有定位的狀況下，以整個文檔爲參照物。
c : 絕對定位，脫離文檔流、不佔據空間blog

案例1：文檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:700px;
            height:500px;
            background:orange;
            margin: 50px auto;
        }
        h2{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        h3{
            width:200px;
            height:200px;
            background:red;
            float:left;
            /* 絕對定位 */
            position: absolute;
            left:30px;
            top:60px;
        }
        h4{
            width:200px;
            height:200px;
            background:green;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
    </div>
</body>
</html>

代碼結果：咱們能夠看出在當前父元素box沒有定位的狀況下，h3以整個文檔爲參照物。it

案例2：io

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:700px;
            height:500px;
            background:orange;
            margin: 50px auto;
            position: relative;
        }
        h2{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        h3{
            width:200px;
            height:200px;
            background:red;
            float:left;
            /* 絕對定位 */
            position: absolute;
            left:30px;
            top:60px;
        }
        h4{
            width:200px;
            height:200px;
            background:green;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
    </div>
</body>
</html>

代碼結果：當父元素box有定位的時候，h3以父元素爲參考物，咱們也能夠看出絕對定位脫離文檔流、不佔據空間。

3: relative（相對定位）：
a : 參照物：自身默認的位置！
b : 始終佔據空間，不會破壞文檔流

包含塊的設置：
1：若是父元素爲參照物：添加 position:relative;
2: 給要作定位的子元素添加position:absolute;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:700px;
            height:500px;
            background:orange;
            margin: 50px auto;
        }
        h2{
            width:200px;
            height:200px;
            background:blue;
            float:left;
        }
        h3{
            width:200px;
            height:200px;
            background:red;
            float:left;
            /* 相對定位 */
            position: relative;
            left:30px;
            top:60px;
        }
        h4{
            width:200px;
            height:200px;
            background:green;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
    </div>
</body>

代碼結果： 參照物爲自身默認的位置，且始終佔據空間，不會破壞文檔流。

4：fixed（固定定位）
a ：參照物：瀏覽器窗口
b ：脫離整個文本流。不佔據空間

需求：實現內容在瀏覽器中左右居中！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:600px;
            height:300px;
            background:#ccc;
            margin:50px auto;
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

代碼結果：能夠看出參照物爲瀏覽器窗口

拓展：實現子元素在父元素上下左右居中顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:600px;
            height:300px;
            background:#ccc;
            margin:50px auto;
            /* 造成參照物 */
            position: relative;
        }
        p{
            width: 100px;
            height: 100px;
            background: yellow;
            /* 上下左右居中 */
            position:absolute;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>
</body>
</html>

代碼結果：

5：sticky（黏性定位）
position:relative 和 position:fixed的結合。
若是頁面沒超出窗口範圍，按照relative 執行
若是內容超出窗口位置，按照fixed執行。

黏性定位經典效果：導航的吸頂效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .header{
            width:100%;
            height:80px;
            background:orange;
        }
        .nav{
            width:1200px;
            height:40px;
            background:#000;
            color: red;
            font-size: 28px;
            line-height: 40px;
            text-align: center;
            margin:0 auto;
            position:sticky;
            top:0;
        }
        .content{
            width:100%;
            height:4000px;
            background:pink;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="nav">這裏是導航</div>
    <div class="content">
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
        <p>LKkjljklkjkl</p>
    </div>
</body>
</html>