CSS屬性：定位屬性（圖文詳解）

時間 2019-11-12

標籤 css 屬性定位圖文詳解欄目 CSS 简体版

原文原文鏈接

本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。css

如下是正文。html

CSS的定位屬性有三種，分別是絕對定位、相對定位、固定定位。前端

position: absolute;  <!-- 絕對定位 -->

    position: relative;  <!-- 相對定位 -->

    position: fixed;     <!-- 固定定位 -->

下面逐一介紹。git

相對定位

相對定位：讓元素相對於本身原來的位置，進行位置調整（可用於盒子的位置微調）。github

咱們以前學習的背景屬性中，是經過以下格式：瀏覽器

background-position:向右偏移量 向下偏移量;

但這回的定位屬性，是經過以下格式：微信

position: relative;
    left: 50px;
    top: 50px;

相對定位的舉例：學習

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

    <style type="text/css">

        body{
            margin: 0px;
        }

        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        .div2{
            position: relative;/*相對定位：相對於本身原來的位置*/
            left: 50px;/*橫座標：正值表示向右偏移，負值表示向左偏移*/
            top: 50px;/*縱座標：正值表示向下偏移，負值表示向上偏移*/

            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
 </head>

 <body>

    <div class="div1">有生之年</div>
    <div class="div2">狹路相逢</div>

 </body>

</html>

效果：ui

相對定位不脫標

相對定位：不脫標，老家留坑，別人不會把它的位置擠走。url

也就是說，相對定位的真實位置還在老家，只不過影子出去了，能夠處處飄。

相對定位的用途

相對定位有坑，因此若是須要作通常不用於作「壓蓋」效果（把一個div放到另外一個div之上）。頁面中，效果極小。就兩個做用：

（1）微調元素
（2）作絕對定位的參考，子絕父相

相對定位的定位值

left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移

PS：負數表示相反的方向。

↘：

position: relative;
    left: 40px;
    top: 10px;

↙：

position: relative;
    right: 100px;
    top: 100px;

↖：

position: relative;
    right: 100px;
    bottom: 100px;

↗：

position: relative;
    left: 200px;
    bottom: 200px;

若是要描述上面這張圖的方向，咱們能夠首先能夠這樣描述：

position: relative;
    left: 200px;
    top: 100px;

由於left: 200px等價於right: -200px，因此這張圖其實有四種寫法。

絕對定位

絕對定位：定義橫縱座標。原點在父容器的左上角或左下角。橫座標用left表示，縱座標用top或者bottom表示。

格式舉例以下：

position: absolute;  /*絕對定位*/
    left: 10px;  /*橫座標*/
    top/bottom: 20px;  /*縱座標*/

絕對定位脫標

絕對定位的盒子脫離了標準文檔流。

因此，全部的標準文檔流的性質，絕對定位以後都不遵照了。

絕對定位以後，標籤就不區分所謂的行內元素、塊級元素了，不須要display:block就能夠設置寬、高了。

絕對定位的參考點（重要）

（1）若是用top描述，那麼參考點就是頁面的左上角，而不是瀏覽器的左上角：

（2）若是用bottom描述，那麼參考點就是瀏覽器首屏窗口尺寸（好好理解「首屏」二字），對應的頁面的左下角：

爲了理解「首屏」二字的含義，咱們來看一下動態圖：

問題：

答案：

用bottom的定位的時候，參考的是瀏覽器首屏大小對應的頁面左下角。

以盒子爲參考點

一個絕對定位的元素，若是父輩元素中也出現了已定位（不管是絕對定位、相對定位，仍是固定定位）的元素，那麼將以父輩這個元素，爲參考點。

以下：（子絕父相）

如下幾點須要注意。

（1）要聽最近的已經定位的祖先元素的，不必定是父親，多是爺爺：

<div class="box1">        相對定位
            <div class="box2">    沒有定位
                <p></p>           絕對定位，將以box1爲參考，由於box2沒有定位，box1就是最近的父輩元素
            </div>
        </div>

再好比：

<div class="box1">        相對定位
            <div class="box2">    相對定位
                <p></p>           絕對定位，將以box2爲參考，由於box2是本身最近的父輩元素
            </div>
        </div>

（2）不必定是相對定位，任何定位，均可以做爲兒子的參考點：

子絕父絕、子絕父相、子絕父固，都是能夠給兒子定位的。可是在工程上，若是子絕、父絕，沒有一個盒子在標準流裏面了，因此頁面就不穩固，沒有任何實戰用途。

工程應用：

「子絕父相」有意義：這樣能夠保證父親沒有脫標，兒子脫標在父親的範圍裏面移動。因而，工程上常常這樣作：

父親浮動，設置相對定位（零偏移），而後讓兒子絕對定位必定的距離。

（3）絕對定位的兒子，無視參考的那個盒子的padding：

下圖中，綠色部分是父親div的padding，藍色部分p是div的內容區域。此時，若是div相對定位，p絕對定位，那麼，
p將無視父親的padding，在border內側爲參考點，進行定位：

工程應用：

絕對定位很是適合用來作「壓蓋」效果。咱們來舉個lagou.com上的例子。

如今有以下兩張圖片素材：

要求做出以下效果：

代碼實現以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            margin: 100px;
            width: 308px;
            height: 307px;
            border: 1px solid #FF7E00;
            position: relative;  /*子絕父相*/

        }
        .box .image img{
            width: 308px;
            height: 196px;
        }
        .box .dtc{
            display: block;  /*轉爲塊級元素，才能設置span的寬高*/
            width: 52px;
            height: 28px;
            background-image: url(http://img.smyhvae.com/20180116_1115.png);
            background-position: -108px 0px; /*這裏用到了精靈圖*/
            position: absolute;  /*採用絕對定位的方式，將精靈圖蓋在最上層*/
            top: -9px;
            left: 13px;
        }
        .box h4{
            background-color: black;
            color: white;
            width:308px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            top: 156px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="dtc"></span>
        <div class="image">
            <img src="http://img.smyhvae.com/20180116_1116.jpg" alt="">
        </div>
        <h4>廣東深圳寶安區建安一路海雅繽紛城4樓</h3>
    </div>
</body>
</html>

代碼解釋以下：

爲了顯示「多套餐」那個小圖，咱們須要用到精靈圖。
「多套餐」下方黑色背景的文字都是經過「子絕父相」的方式的蓋在大海報image的上方的。

代碼的效果以下：

讓絕對定位中的盒子居中

咱們知道，若是想讓一個標準流中的盒子居中（水平方向看），能夠將其設置margin: 0 auto屬性。

可若是盒子是絕對定位的，此時已經脫標了，若是還想讓其居中，能夠這樣作：

<div>
    width: 600px;
    height: 60px;
    position: absolute;  絕對定位的盒子
    left: 50%;           首先，讓左邊線居中
    top: 0;
    margin-left: -300px;  而後，向左移動寬度（600px）的一半
</div>

如上方代碼所示，咱們先讓這個寬度爲600px的盒子，左邊線居中，而後向左移動寬度（600px）的一半，就達到效果了。

咱們能夠總結成一個公式：

left:50%; margin-left:負的寬度的一半

固定定位

固定定位：就是相對瀏覽器窗口進行定位。不管頁面如何滾動，這個盒子顯示的位置不變。

備註：IE6不兼容。

用途1：網頁右下角的「返回到頂部」

好比咱們常常看到的網頁右下角顯示的「返回到頂部」，就能夠固定定位。

<style type="text/css">
        .backtop{
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 60px;
            height: 60px;
            background-color: gray;
            text-align: center;
            line-height:30px;
            color:white;
            text-decoration: none;   /*去掉超連接的下劃線*/
        }
    </style>

用途2：頂部導航條

咱們常常能看到固定在網頁頂端的導航條，能夠用固定定位來作。

須要注意的是，假設頂部導航條的高度是60px，那麼，爲了防止其餘的內容被導航條覆蓋，咱們要給body標籤設置60px的padding-top。

頂部導航條的實現以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
body{
            /*爲何要寫這個？*/
            /*不但願咱們的頁面被nav擋住*/
            padding-top: 60px;
            /*IE6不兼容固定定位，因此這個padding沒有什麼用，就去掉就好了*/
            _padding-top:0;
        }
        .nav{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: #333;
            z-index: 99999999;
        }
        .inner_c{
            width: 1000px;
            height: 60px;
            margin: 0 auto;

        }
        .inner_c ul{
            list-style: none;
        }
        .inner_c ul li{
            float: left;
            width: 100px;
            height: 60px;
            text-align: center;
            line-height: 60px;
        }
        .inner_c ul li a{
            display: block;
            width: 100px;
            height: 60px;
            color:white;
            text-decoration: none;
        }
        .inner_c ul li a:hover{
            background-color: gold;
        }
        p{
            font-size: 30px;
        }
        .btn{
            display: block;
            width: 120px;
            height: 30px;
            background-color: orange;
            position: relative;
            top: 2px;
            left: 1px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="inner_c">
            <ul>
                <li><a href="#">網頁欄目</a></li>
                <li><a href="#">網頁欄目</a></li>
                <li><a href="#">網頁欄目</a></li>
                <li><a href="#">網頁欄目</a></li>
                <li><a href="#">網頁欄目</a></li>
                <li><a href="#">網頁欄目</a></li>
                <li><a href="#">網頁欄目</a></li>
                <li><a href="#">網頁欄目</a></li>
                <li><a href="#">網頁欄目</a></li>
                <li><a href="#">網頁欄目</a></li>
            </ul>
        </div>
    </div>
</body>
</html>