0029 css定位：相對、絕對、固定、絕對定位盒子居中、z-index、絕對定位改變display屬性、案例

本文轉載自查看原文 2019-12-31 18:25 1150 css

粘性定位sticky
粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。例如：
#one { position: sticky; top: 10px; }

1. CSS 布局的三種機制

網頁布局的核心 —— 就是用 CSS 來擺放盒子位置。

CSS 提供了 3 種機制來設置盒子的擺放位置，分別是普通流、浮動和定位，其中：

普通流（標准流）
浮動
- 讓盒子從普通流中浮起來 —— 讓多個盒子(div)水平排列成一行。
定位
- 將盒子定在某一個位置，自由的漂浮在其他盒子的上面 —— CSS 離不開定位，特別是后面的 js 特效。

2. 為什么使用定位

我們先來看一個效果，同時思考一下用標准流或浮動能否實現類似的效果？

1. 小黃色塊在圖片上移動，吸引用戶的眼球。

在這里插入圖片描述

2. 當我們滾動窗口的時候，盒子是固定屏幕某個位置的

在這里插入圖片描述

結論：要實現以上效果，標准流或浮動都無法快速實現

一句話說出定位：

將盒子定在某一個位置，自由的漂浮在其他盒子（包括標准流和浮動）的上面

所以，我們腦海應該有三種布局機制的上下順序：

標准流在最底層 (海底) ------- 浮動的盒子在中間層 (海面) ------- 定位的盒子在最上層（天空）

3. 定位詳解

定位也是用來布局的，它有兩部分組成：

定位 = 定位模式 + 邊偏移

3.1 邊偏移

簡單說，我們定位的盒子，是通過邊偏移來移動位置的。

在 CSS 中，通過 top、bottom、left 和 right 屬性定義元素的邊偏移：（方位名詞）

邊偏移屬性	示例	描述
`top`	`top: 80px`	頂端偏移量，定義元素相對於其父元素上邊線的距離。
`bottom`	`bottom: 80px`	底部偏移量，定義元素相對於其父元素下邊線的距離。
`left`	`left: 80px`	左側偏移量，定義元素相對於其父元素左邊線的距離。
`right`	`right: 80px`	右側偏移量，定義元素相對於其父元素右邊線的距離

定位的盒子有了邊偏移才有價值。一般情況下，凡是有定位地方必定有邊偏移。

3.2 定位模式 (position)

在 CSS 中，通過 position 屬性定義元素的定位模式，語法如下：

選擇器 { position: 屬性值; }

定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式。

值	語義
`static`	靜態定位
`relative`	相對定位
`absolute`	絕對定位
`fixed`	固定定位

在這里插入圖片描述

3.2.1 靜態定位(static) - 了解

靜態定位是元素的默認定位方式，無定位的意思。它相當於 border 里面的none，不要定位的時候用。
靜態定位按照標准流特性擺放位置，它沒有邊偏移。
靜態定位在布局時我們幾乎不用的

3.2.2 相對定位(relative) - 重要

相對定位是元素相對於它自己原來在標准流中的位置來說的。（自戀型）【不脫標。】

效果圖：

在這里插入圖片描述

相對定位的特點：（務必記住）【不脫標】

相對於自己原來在標准流中位置來移動的。
原來在標准流的區域繼續占有，后面的盒子仍然以標准流的方式對待它。

3.2.3 絕對定位(absolute) - 重要

絕對定位是元素以帶有定位的父級元素來移動位置（拼爹型）

完全脫標 —— 完全不占位置；
父元素沒有定位，則以瀏覽器為准定位（Document 文檔）。
父元素要有定位
- 將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

絕對定位的特點：（務必記住）

絕對是以帶有定位的父級元素來移動位置（拼爹型），如果父級都沒有定位，則以瀏覽器文檔為准移動位置。
不保留原來的位置，完全是脫標的。

因為絕對定位的盒子是拼爹的，所以要和父級搭配一起來使用。

定位口訣 —— 子絕父相

剛才咱們說過，絕對定位，要和帶有定位的父級搭配使用，那么父級要用什么定位呢？

子絕父相 —— 子級是絕對定位，父級要用相對定位。

子絕父相是使用絕對定位的口訣，要牢牢記住！

疑問：為什么在布局時，子級元素使用絕對定位時，父級元素就要用相對定位呢？

觀察下圖，思考一下在布局時，左右兩個方向的箭頭圖片以及父級盒子的定位方式。

在這里插入圖片描述

分析：

方向箭頭疊加在其他圖片上方，應該使用絕對定位，因為絕對定位完全脫標，完全不占位置。
父級盒子應該使用相對定位，因為相對定位不脫標，后續盒子仍然以標准流的方式對待它。
- 如果父級盒子也使用絕對定位，會完全脫標，那么下方的廣告盒子會上移，這顯然不是我們想要的。

結論：父級要占有位置，子級要任意擺放，這就是子絕父相的由來。

3.2.4 固定定位(fixed) - 重要

固定定位是絕對定位的一種特殊形式：認死理型。如果說絕對定位是一個矩形，那么固定定位就類似於正方形。

完全脫標 —— 完全不占位置；
只認瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設置元素的位置；
- 跟父元素沒有任何關系；單獨使用的
- 不隨滾動條滾動。

/* 【絕對定位的盒子】沒寫寬度，默認的寬度是內容的寬度 */

/* 以后，定位的盒子，很多情況下，需要單寫寬度 */

/* 以后，定位的盒子，如果需要通欄，那寬度就給100% */

案例演練：固定定位案例。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7kjAnSFI-1576333332670)(./images/08_固定定位案例.png)]

提示：IE 6 等低版本瀏覽器不支持固定定位。

4. 定位(position)的案例

4.1 哈根達斯

案例截圖：

哈根達斯分析

一個大的 div 中包含 3 張圖片；
大的 div 水平居中；
2 張小圖片重疊在廣告圖片上方 —— 脫標，不占位置，需要使用絕對定位；
2 張小圖片分別顯示在左上角和右下角 —— 需要使用邊偏移確定准確位置。

案例小結：

子絕父相 —— 子元素使用絕對定位，父元素使用相對定位；
與浮動的對比：
- 絕對定位：脫標，利用邊偏移指定准確位置；
- 浮動：脫標，不能指定准確位置，讓多個塊級元素在一行顯示。

練習：完成哈根達斯案例（5 分鍾）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>哈根達斯</title>
	<style>
		.box {
			position: relative;
			width: 310px;
			height: 190px;
			border: 1px solid #ccc;
			margin: 100px auto;
			padding: 10px;
		}
		.top {
			/*float: left;*/
			position: absolute;
			top: 0;
			left: 0;
		}
		.bottom {
			position: absolute;
			bottom: 0;
			right: 0;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/top_tu.gif" alt="" class="top">
		<img src="images/adv.jpg" alt="">
		<img src="images/br.gif" alt="" class="bottom">	
	</div>
</body>
</html>

4.2 仿新浪頭部和廣告

新浪案例分析

頂部圖片固定在瀏覽器可視窗口頂部，不會隨窗口一起滾動；
左右兩側的廣告圖片固定在瀏覽器可視窗口的左右兩側，不會隨窗口一起滾動；
注意：底部的內容圖片初始顯示在頂部圖片的下方，如何解決？

步驟 1 —— 頂部圖片和底部內容

.top {
    /* 注意：使用固定定位時，如果盒子中沒有內容，需要指定寬度 */
    width: 100%;
    height: 44px;
    background: url(images/top.png) no-repeat top center;
    position: fixed;
    left: 0px;
    top: 0px;
}

.box {
    width: 1002px;
    /* 頂部的 44px 的 margin 可以讓 box 顯示在頂部圖片下方 */
    margin: 44px auto;
}

注意：

在使用固定定位時，如果盒子中沒有內容，需要指定寬度
設置底部內容圖片的頂部 margin，可以讓底部盒子初始顯示在頂部圖片的下方。

步驟 2 —— 左右兩側廣告

.ad-left,
.ad-right {
    position: fixed;
    top: 100px;
}

.ad-left {
    left: 0px;
}

.ad-right {
    right: 0px;
}

注意：不要同時使用 left 和 right 和邊偏移屬性。

案例小結：

固定定位的應用場景：固定在瀏覽器可視窗口某個位置的布局；
在使用固定和絕對定位時，如果盒子中沒有內容，需要指定寬度（稍后就講）。

練習：完成仿新浪頭部和廣告案例（5 分鍾）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 1002px;
			margin: 0 auto;
		}
		.ad-l {
			position: fixed;
			top: 100px;
			left: 0;
		}
		.ad-r {
			position: fixed;
			top: 100px;
			right: 0;
		}
	</style>
</head>
<body>	
	<img src="images/ad-l.png" alt="" class="ad-l">
	<img src="images/ad-r.png" alt="" class="ad-r">
	<div class="box">
		<img src="images/box.png" alt="">
	</div>
</body>
</html>

5. 定位(position)的擴展

5.1 絕對定位的盒子居中

注意：絕對定位/固定定位的盒子不能通過設置 margin: auto 設置水平居中。【相對定位，沒脫標，還是用margin: auto。】

在使用絕對定位時要想實現水平居中，可以按照下圖的方法：

在這里插入圖片描述

left: 50%;：讓盒子的左側移動到父級元素的水平中心位置；
margin-left: -100px;：讓盒子向左移動自身寬度的一半。

案例演示：相對定位案例。

盒子居中定位示意圖

在這里插入圖片描述

練習：實現盒子左中、右中、中上、中下、中中定位（5 分鍾）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>絕對定位的盒子水平居中對齊</title>
	<style>
		div {
			/*絕對定位 margin 左右auto 不能讓盒子水平居中*/
			position: absolute;
			/*1.left 50% 走父親寬度的一半*/	
			left: 50%;
			/*2.margin-left 左走自己寬度的一半  一定注意是 負值*/
			margin-left: -100px;  /* 這里的-100px，不能寫成-50% */
			width: 200px;
			height: 200px;
			background-color: pink;
			/*標准流 margin 左右auto 就可以讓盒子水平居中*/
			/*margin: auto;*/
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EVG3fj54-1576333332676)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20191214164941384.png)]$

我的demo
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>絕對定位的盒子水平居中對齊</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.wraper {
			width: 210px;
			height: 210px;
			margin: 0 auto;
			border: 1px solid #000;
		}
		.div1 {
			position: absolute;
			left: 50%;
			top: 0;
			width: 200px;
			height: 200px;
			margin-left: -100px;
			background-color: pink;

		}

		.div2 {
			position: relative;
			width: 300px;
			height: 300px;
			margin: auto;
			background-color: orange;
		}

		.div3 {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 150px;
			height: 150px;
			margin-left: -75px;
			margin-top: -75px;
			background-color: yellowgreen;
		}
	</style>
</head>
<body>
	<!-- 絕對定位后，脫標，下面的盒子會上來占位，如何消除絕對定位的盒子，對下面的盒子產生的影響？（1）給絕對定位的元素的父元素設置高；（2）給下面的盒子設置內外邊距；（3）給下面的盒子設置絕對定位、邊偏移量。 -->
	<div class="wraper">
		<div class="div1"></div> 
	</div>

	<div class="div2">
		<div class="div3"></div>
	</div>
</body>
</html>

在這里插入圖片描述

5.2 堆疊順序（z-index）

【這里的重疊，不區分相對定位、絕對定位，遵循后來者居上，以及z-index的原則。】

在使用定位布局時，可能會出現盒子重疊的情況。

加了定位的盒子，默認后來者居上，后面的盒子會壓住前面的盒子。

應用 z-index 層疊等級屬性可以調整盒子的堆疊順序。如下圖所示：

在這里插入圖片描述

z-index 的特性如下：

屬性值：正整數、負整數或 0，默認值是 0，數值越大，盒子越靠上；
如果屬性值相同，則按照書寫順序，后來居上；
數字后面不能加單位。

注意：z-index 只能應用於相對定位、絕對定位和固定定位的元素，其他標准流、浮動和靜態定位無效。

案例演示：堆疊順序。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.damao,
		.ermao,
		.sanmao {
			/*絕對定位*/
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.damao {
			z-index: 2;
			/*數值越大越靠上
			后面不跟單位
			只能是整數*/
		}
		.ermao {
			top: 50px;
			left: 50px;
			z-index: 1;
			background-color: green;
		}
		.sanmao {
			top: 100px;
			left: 100px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="damao"></div>
	<div class="ermao"></div>
	<div class="sanmao"></div>
</body>
</html>

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-tVFJWug2-1576333332682)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20191214172623848.png)]$

5.3 定位改變display屬性

前面我們講過， display 是顯示模式，可以改變顯示模式有以下方式:

可以用inline-block 轉換為行內塊 /* 行內塊不給width，默認的寬度就是內容的寬度 */
可以用浮動 float 默認轉換為行內塊（類似，並不完全一樣，因為浮動是脫標的）
絕對定位和固定定位也和浮動類似，默認轉換的特性，轉換為行內塊。【相對定位不行。】

所以說，一個行內的盒子，如果加了浮動、固定定位和絕對定位，不用轉換，就可以給這個盒子直接設置寬度和高度等。

同時注意：

浮動元素、絕對定位、固定定位元素的都不會觸發外邊距合並的問題。（我們以前是用padding border overflow解決的）。【父元素、子元素都可以。】

也就是說，我們給盒子改為了浮動或者定位，就不會有垂直外邊距合並的問題了。

案例：完善新浪導航案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			width: 1002px;
			margin: 0 auto;
			margin-top: 44px;
		}
		.ad-l {
			position: fixed;
			top: 100px;
			left: 0;
		}
		.ad-r {
			position: fixed;
			top: 100px;
			right: 0;
		}
		.top {
			/*因為沒有寫寬度  默認的寬度是內容的寬度*/
			/*此時我們需要給這個top 盒子 通欄的盒子*/
			/*所以以后，定位的盒子，很多情況下，需要單寫寬度*/
			/*所以以后，定位的盒子，如果需要通欄 那我們寬度就給 100%*/
			width: 100%;
			position: fixed;
			top: 0;
			height: 44px;
			/*background-color: pink;*/
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="top">
		<img src="images/top.png" alt="">
	</div>
	<!-- 左右的固定定位 -->
	<img src="images/ad-l.png" alt="" class="ad-l">
	<img src="images/ad-r.png" alt="" class="ad-r">
	<div class="box">
		<img src="images/box.png" alt="">
	</div>
</body>
</html>

在這里插入圖片描述

6. 綜合演練 - 淘寶輪播圖

圓角矩形設置4個角

圓角矩形可以為4個角分別設置圓度，但是是有順序的：【先寫上下，再寫左右】

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

如果4個角，數值相同
```
border-radius: 15px;
```
里面數值不同，我們也可以按照簡寫的形式，具體格式如下:

border-radius: 左上角 右上角  右下角  左下角;

還是遵循的順時針。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘寶輪播圖</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.taobao {
			/*子絕父相*/
			position: relative;
			width: 520px;
			height: 280px;
			background-color: pink;
			margin: 100px auto;
		}
		/*並集選擇器 集體聲明 讓代碼更簡潔*/
		.arrow-l,
		.arrow-r {
			/*只能用定位來做，才能壓住盒子*/
			/*不要占有位置 隨便移動位置 必須用絕對定位*/
			position: absolute;
			/*垂直居中公式*/
			/*1. 走父級高度的 50%*/
			top: 50%;
			/*2. 往上走 自己高度 的一半*/
			margin-top: -15px;
			/*絕對定位的盒子 無須轉換，直接給大小就好了*/
			width: 20px;
			height: 30px;
			background: rgba(0, 0, 0, .2);
			text-decoration: none;
			color: #fff;
			/*text-align: center;*/
			line-height: 30px;
		}
		.arrow-l {
			left: 0;
			/*圓角矩形*/
			/*border-radius: 15px;*/
			/*右上角*/
			border-top-right-radius: 15px;
			/*右下角*/
			border-bottom-right-radius: 15px;
		}
		.arrow-r {
			right: 0;
			text-align: right;
			/*圓角矩形*/
			/*border-radius: 15px;*/
			/*border-radius: 左上角 右上角  右下角  左下角;*/
			border-radius: 15px 0 0 15px;
		}
		.arrow-l:hover,
		.arrow-r:hover {
			background: rgba(0, 0, 0, .4);
		}
		.circle {
			position: absolute;
			left: 50%;
			margin-left: -35px;
			bottom: 15px;
			width: 70px;
			height: 13px;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 7px;
		}
		.circle li {
			float: left;
			width: 8px;
			height: 8px;
			background-color: #fff;
			margin: 3px;
			border-radius: 50%;
		}
		/*current 當前的意思  此處一定要注意 優先級的問題*/
		.circle .current {
			background-color: #ff5000;
		}
	</style>
</head>
<body>
	<div class="taobao">
		<!-- 左按鈕 -->
		<a href="#" class="arrow-l"> &lt; </a>
		<!-- 右按鈕 -->
		<a href="#" class="arrow-r"> &gt; </a>
		<!-- 圖片 -->
		<img src="images/taobao.jpg" alt="">
		<!-- 小圓點 -->
		<ul class="circle">
			<li></li>
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

7. 定位小結

定位模式	是否脫標占有位置	移動位置基准	模式轉換（行內塊）	使用情況
靜態static	不脫標，正常模式	正常模式	不能	幾乎不用
相對定位relative	不脫標，占有位置	相對自身位置移動	不能	基本單獨使用
絕對定位absolute	完全脫標，不占有位置	相對於定位父級移動位置	能	要和定位父級元素搭配使用
固定定位fixed	完全脫標，不占有位置	相對於瀏覽器移動位置	能	單獨使用，不需要父級

注意：

邊偏移需要和定位模式聯合使用，單獨使用無效；
top 和 bottom 不要同時使用；
left 和 right 不要同時使用。

8.xuecheng網定位總結添加

一個小技巧:

.fixedbar {
    position: fixed;
    top: 200px;
    left: 50%;
    z-index: 999;
    /*-600 版心的一半  + 自己的寬度  = 780 */
    margin-left: -790px;
    width: 180px;
    height: 420px;
    background-color: pink;
}

9. 網頁布局總結

一個完整的網頁，有標准流、浮動、定位一起完成布局的。每個都有自己的專門用法。

1). 標准流

可以讓盒子上下排列或者左右排列的。

2). 浮動

可以讓多個塊級元素一行顯示或者左右對齊盒子，浮動的盒子就是按照順序左右排列。

3). 定位

定位最大的特點是有層疊的概念，就是可以讓多個盒子前后疊壓來顯示，但是每個盒子需要測量數值。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css 清除浮動定位 z-index屬性前端 -- 定位和z-index 前端之 CSS : background (精靈圖); 定位; z-index; 深入理解CSS定位中的堆疊z-index 淺析CSS——元素重疊及position定位的z-index順序 IOS上z-index和fixed定位無效按鈕放到圖片上，z-index和絕對定位絕對定位使用方法及Z-index css定位:相對定位、絕對定位、固定定位的區別與特性 CSS——靜態定位，相對定位，絕對定位，固定定位