css定位詳解

Joerrot發表於2019-03-18
CSS

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

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

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

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

下面逐一介紹。

相對定位

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

我們舉個例子：

<!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>

 效果：（div為塊級元素，所以會獨佔一行）

相對定位不脫標

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

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

相對定位的用途

如果想做“壓蓋”效果（把一個div放到另一個div之上），我們一般不用相對定位來做。相對定位，就兩個作用：

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

簡單的來講，相對定位預設以盒子的左上角為參照點；

如果給出了某些方向的相對值（正值），就表示，原來的盒子在那些方向的組合上。

如果為負值，則與其相反方向的正值相同，例如：left: 200px等價於right: -200px。

↘：

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

絕對定位

絕對定位：定義橫縱座標。原點在父容器的左上角或左下角。橫座標用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(https://i.iter01.com/images/7e1df158f5ab37a1bfa3aec0f8a503a75cc0702c7792ffe7d69f667ba2428083.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="https://i.iter01.com/images/e1b534d7562330b9ecd326d9401070a93dfca47713e906ddb27da8279cec93b4.jpg" alt="">
        </div>
        <h4>廣東深圳寶安區建安一路海雅繽紛城4樓</h4>
    </div>
</body>
</html>

“多套餐”下方黑色背景的文字都是通過“子絕父相”的方式的蓋在大海報image的上方的。

程式碼的效果如下：

讓絕對定位中的盒子居中

我們知道，如果想讓一個標準流中的盒子居中（水平方向看），可以將其設定margin: 0 auto屬性。

可如果盒子是絕對定位的，此時已經脫標了，如果還想讓其居中，可以這樣做：

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

我們可以總結成一個公式：

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。

因為此時頂部導航條設定為固定定位，所以它無視body的padding-top（其他所有內容均下移一定距離），如果沒有設定padding-top，則繼續向下寫內容的時候，內容也會無視固定定位，而由於標準流的方式，“被蓋”在了導航欄下面。

如：

如果設定body的padding-top為100px,則是：

5、z-index屬性：

z-index屬性：表示誰壓著誰。數值大的壓蓋住數值小的。

有如下特性：

（1）屬性值大的位於上層，屬性值小的位於下層。

（2）z-index值沒有單位，就是一個正整數。預設的z-index值是0。

（3）如果大家都沒有z-index值，或者z-index值一樣，那麼在HTML程式碼裡寫在後面，誰就在上面能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。

（4）只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對定位、固定定位，都可以使用z-index值。而浮動的元素不能用。

（5）從父現象：父親慫了，兒子再牛逼也沒用。意思是，如果父親1比父親2大，那麼，即使兒子1比兒子2小，兒子1也能在最上層。

針對（1）（2）（3）條，舉例如下：

這是預設情況下的例子：（div2在上層，div1在下層）

現在加一個z-index屬性，要求效果如下：

 第五條分析：

z-index屬性的應用還是很廣泛的。當好幾個已定位的標籤出現覆蓋的現象時，我們可以用這個z-index屬性決定，誰處於最上方。也就是層級的應用。

層級：

（1）必須有定位（除去static，預設值。沒有定位，元素出現在正常的流中）

（2）用z-index來控制層級數。

相關文章