深刻理解css中position屬性及z-index屬性

時間 2019-11-11

標籤深刻理解 css position 屬性 index 欄目 CSS 简体版

原文原文鏈接

深刻理解css中position屬性及z-index屬性

　　在網頁設計中，position屬性的使用是很是重要的。有時若是不能認識清楚這個屬性，將會給咱們帶來不少意想不到的困難。php

　　position屬性共有四種不一樣的定位方法，分別是static、fixed、relative、absolute,sticky。最後將會介紹和position屬性密切相關的z-index屬性。css

第一部分：position: static

　　static定位是HTML元素的默認值，即沒有定位，元素出如今正常的流中，所以，這種定位就不會收到top，bottom,left,right的影響。html

　　如html代碼以下：java

	<div class="wrap">
		<div class="content"></div>
	</div>

　　css代碼以下：瀏覽器

.wrap{width: 300px;height: 300px; background: red;}
.content{position: static; top:100px; width: 100px;height: 100px; background: blue;}

　　效果圖以下：spa

咱們發現，雖然設置了static以及top，可是元素仍然出如今正常的流中。設計

第二部分：fixed定位

　　fixed定位是指元素的位置相對於瀏覽器窗口是固定位置，即便窗口是滾動的它也不會滾動，且fixed定位使元素的位置與文檔流無關，所以不佔據空間，且它會和其餘元素髮生重疊。
3d

　　html代碼以下：code

<div class="content">我是使用fix來定位的！！！因此我相對於瀏覽器窗口，一直不動。</div>

　　css代碼以下：htm

body{height:1500px; background: green; font-size: 30px; color:white;}
.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}

　　效果圖以下：

即右下角的div永遠不會動，就像常常彈出來的廣告！！！

值得注意的是：fixed定位在IE7和IE8下須要描述！DOCTYPE才能支持。

第三部分：relative定位

　　相對定位元素的定位是相對它本身的正常位置的定位。

　　關鍵：如何理解其自身的座標呢？

　　讓咱們看這樣一個例子，hmtl以下：

<h2>這是位於正常位置的標題</h2>
<h2 class="pos_bottom">這個標題相對於其正常位置向下移動</h2>
<h2 class="pos_right">這個標題相對於其正常位置向右移動</h2>

　　css代碼以下：

.pos_bottom{position:relative; bottom:-20px;}
.pos_right{position:relative;left:50px;}

　　效果圖以下：

即bottom:-20px;；向下移動。 left:50px;向右移動。

便可以理解爲：移動後是移動前的負的位置。

好比上例中，移動後是移動前負的bottom:-20px;即移動後是移動前bottom:20px;也就是說，移動後是移動前的向下20px；

又如：left:50px;移動後是移動前左邊的-50px;那麼也就是說移動後是移動前的右邊的50px。

即：移動後對於移動前：若是值爲負數，則直接換成整數；若是值爲整數，則直接改變相對方向。

　　弄清楚了relative是如何移動的，下面咱們看一看移動以後是否會產生其餘的影響。

html代碼以下：

<h2>這是一個沒有定位的標題</h2>
<h2 class="pos_top">這個標題是根據其正常位置向上移動</h2>
<p><b>注意:</b> 即便相對定位元素的內容是移動,預留空間的元素仍保存在正常流動。</p>

　　css代碼以下：

h2.pos_top{position:relative;top:-35px;}

　　效果圖以下：

根據以前的說法，top:-35px；值是負數，則直接換成正數，即移動後相對與移動前向上偏移了35px；咱們發現於上，移動後和上面的元素髮生了重疊；於下，即便相對元素的內容移動了，可是預留空間的元素仍然保存在正常流動，也就是說相對移動以後，不會對下面的其餘元素形成影響。

注意：top：20px；是指子元素的margin外側和包裹元素的border內側之間的距離是20px。

　第四部分：absolute定位

　　絕對定位的元素相對於最近的已定位父元素，若是元素沒有已定位的父元素，那麼它的位置相對於<html>。

下面舉幾個例子：

　　例子1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>絕對定位</title>
	<style>
                body{background:green;}
		.parent{ width: 500px;height: 500px;background: #ccc;}
		.son{ width: 300px;height: 300px;background: #aaa;}
		span{position: absolute; right: 30px; background: #888;}
	</style>
</head>
<body>
	<div class="parent">
		<div class="son">
			<span>什麼？</span>
		</div>
	</div>
</body>
</html>

　效果以下：

即我只在span中設置了position:absolute；而在其父元素中都沒有，因而它的位置是相對於html的。

例2:

.son{position: relative; width: 100px;height: 100px;background: #aaa; }

　相較於上一個例子，我只修改了class爲son的元素的css，設置爲position：relative；效果圖以下：

因而，咱們發現如今span的位置是相對於設有position屬性的class爲son的父元素的。

例3：

.parent{position: absolute; width: 300px;height: 300px;background: #ccc;}

　這個例子我只是修改了第一個例子中的css--設置了position:absolute；效果以下：

因而咱們發現，如今span的定位是相對於具備position:absolute的屬性的class爲parent的父元素。

例4：

.parent{position:fixed; width: 300px;height: 300px;background: #ccc;}

相對於例1，我添加了fixed的position屬性，發現結果和例3是如出一轍的。

例5：

.parent{position:static; width: 300px;height: 300px;background: #ccc;}

相對於例1，我添加了static的position屬性（即html的默認屬性），結果和例1是同樣的。

綜上所述，當某個absolute定位元素的父元素具備position:relative/absolute/fixed時，定位元素都會依據父元素而定位，而父元素沒有設置position屬性或者設置了默認屬性，那麼定位屬性會依據html元素來定位。

第五部分：重疊的元素--z-index屬性

　　首先聲明：z-index只能在position屬性值爲relative或absolute或fixed的元素上有效。

基本原理是：z-index的值能夠控制定位元素在垂直於顯示屏幕方向（z軸）上的堆疊順序(stack order),值大的元素髮生重疊時會在值小的元素上面。

下面咱們經過幾個例子繼續來理解這個屬性。

　　例1：

即son1和son2是parent的兩個子元素，效果圖以下：

這是沒有使用z-index，咱們發現son2在son1之上，這是由於son2在html中排在了son1以後，因此後來者將前者覆蓋，若是咱們顛倒如下二者的順序，就會發現藍色(son1)在上了。

例2：

在son1中加入z-index：1；能夠發現效果以下：

也就是說son2的index值是小於1的。

若是咱們給son2也加上z-index:1;呢？結果獲得黃色(son2)就在上面了。（由於一旦z-index值相等，狀況就和都不設置index值同樣了）

例3：

在son2中加入z-index:5;能夠發現效果以下：

即黃色(son2)又在上面了，這個很簡單，不做過多討論。

例4：

在父元素添加z-index:10;

在son1和son2添加z-index:5; 這樣理論上父元素就會在上面（黃色覆蓋藍色和黃色）；

結果以下：

結果沒有變!!!!! 這就說明父元素和子元素不能作z-index的比較！！！但真的是這樣嗎？看下一個例子：

例5：

把兩個子元素的z-index值同時設置爲-5；父元素不設置z-index屬性。結果以下：

成功！！說明在父元素和子元素之間仍是能夠做比較的！！！只是須要咱們把子元素的z-index值設爲負數。

例6：

咱們在例5的基礎上再給父元素添加一個z-index:10，講道理~應該也能夠獲得和例5相同的結果吧！！

然而.... 看來咱們不能設置父元素的z-index值，不然就不能出現咱們想要的效果。下面再看一個有趣的例子!

例7：

咱們根據例6的經驗不設置父元素的值，如今設置son1(藍色)的z-index爲5，son2的z-index爲-5，看下面的結果：

即son1在最上面，父元素在中間，son2在最下面。

對於z-index的探索就這樣結束了嗎？？固然沒有，看下面幾個更爲有趣的例子吧。

例8：

代碼以下：

效果以下：

雖然parent1和parent2分別是son1和son2的父元素，按照咱們以前的理解，父元素是不可添加z-index值的，不然會致使錯誤。可是這裏parent1和parent2相對於body又是子元素，他倆是同級的，因此就能夠進行比較了。且此時parent1的子元素son1（藍色）在上。

例9：

若是咱們在例7的基礎上，把parent2的z-index值設爲20，就會發現以下效果：

即parent2在上的同時son2也會同時在上。這也就是所謂的「拼爹」了！！

例10.一樣在例7的基礎上，咱們不設置parent1和parent2和son2的index值，而只設置son1的z-index值爲10，效果以下:

即本來在下面的藍色son1被提上來了，而沒有把父元素（parent1）提上了，誒，不孝順啊！！

例11.顯然，在例10的基礎上，若是咱們把son2的index值設置的比son1的大，如20，那麼son2就會覆蓋son1了，而且都在兩個父元素只上了！！

效果以下圖：

例12.固然，若是咱們把兩個son的z-index都設置位負數如-5，那麼二者就都會被父元素所覆蓋：

第六部分：脫離文檔流致使的問題

　　咱們知道若是使用position:absolute和position:fixed都會致使元素脫離文檔流，由此就會產生相應的問題。舉例以下：

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style>
        .div1{
            background-color: red;
            padding:20px;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

這時效果以下：

　　即子元素將父元素撐了起來。

　　可是一旦子元素的position爲fixed或者是absolute，那麼它就會脫離文檔流，這樣的後果是父元素沒法被撐開，以下所示：

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style>
        .div1{
            background-color: red;
            padding:20px;
            position: relative;
        }
        .div2{
            position: absolute; // 添加position:absolute使其脫離文檔流
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

　　最終效果以下所示：

解決方法1：在js中設置父元素高度等於子元素的高度。

解決方法2：給父元素強行設置高度。（對於寬度致使的相似問題就強行設置寬度）

第七部分：position: sticky;

　　這一部份內容是2017-3-13補充的，以前沒有了解到這個屬性，幾天才知道這個屬性就是我常用js使用的方法，就是在一個內容中，咱們能夠固定一個部分，而後到了另外一個內容，又會固定另一個部分。

　　一樣也能夠設置top值，這個值是border上邊緣和包裹元素的下邊緣之間的距離，可是一旦滾動起來，就是和瀏覽器頂部的距離了，話很少說，直接上demo，一看便懂。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alink</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .wrap {
            border: 20px solid blue;
        }
        .header {
            position: sticky;
            top: 20px;
            border: 20px solid red;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            這是頭部
        </div>
        <div class="content">
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
            這是內容部分<br>
        </div>
    </div>
    <div class="wrap">
        <div class="header">
            這是另外一個頭部
        </div>
        <div class="content">
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
            這是另外一個內容<br>
        </div>
    </div>
</body>
</html>

第八部分：總結

　這一部分知識仍是很是有意思的，但願你們能夠繼續探索，固然若是經過這篇博文給予你們一點點的幫助那就再好不過了！

相關標籤/搜索

每日一句

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