搜尋

首頁 >web前端 >css教學 >css定位position屬性應如何用（實例詳解）

css定位position屬性應如何用（實例詳解）

WBOY
WBOY轉載
2021-12-20 16:26:333092瀏覽

這篇文章帶給大家css中position定位屬性的相關知識，position用來當屬性規定元素的定位類型，不同的屬性值有著不同的定位樣式，希望對大家有幫助。

css定位position屬性應如何用（實例詳解）

定位(position)

#background-position 背景定位

如果，說浮動， 關鍵在一個「浮」 字上面， 那麼我們的定位，關鍵在於一個「位」 上。

PS: 定位是我們CSS算是數一數二難點的了，但是，你務必要學好它，我們CSS離不開定位，特別是後面的js特效，天天和定位打交道。不要抵觸它，反而要愛上它，它可以讓我們工作更輕鬆！

為什麼要用定位？

那麼定位，最長運用的場景再在那裡呢？來看幾幅圖片，你一定會有感悟！

  1. 小黃色區塊可以再圖片上移動：
    css定位position屬性應如何用（實例詳解）

  2. #左右箭頭壓住圖片：
    css定位position屬性應如何用（實例詳解）

  3. #hot 再盒子外面多出一塊，更加突出：
    css定位position屬性應如何用（實例詳解）
    以上三個小地方，如果用標準流或浮動，實作會比較複雜或者難以實現，此時我們用定位來做。

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移

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

也就說，以後定位要跟這邊偏移搭配使用了，top: 100px; left: 30px; 等等

2、定位模式(定位的分類)

#在CSS中，position屬性用於定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

##absolute 絕對定位，相對於其上一個已定位的父元素進行定位#fixed固定定位，相對於瀏覽器視窗進行定位

靜態定位(static)

靜態定位是所有元素的預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置。所謂靜態位置就是各元素在HTML文檔流中預設的位置。

上面的話翻譯成白話： 就是網頁中所有元素都預設的是靜態定位。其實就是標準流的特性。

在靜態定位狀態下，無法透過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

其實沒啥，靜態定位唯一的用途：就是 取消定位。 position: static;

相對定位relative(自戀型)

相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位於相對（自己的）位置。

對元素設定相對定位後，可以透過邊偏移屬性改變元素的位置，但是它在文件流程中的位置仍然保留（保留原來所佔位置）。如下圖所示，也就是一個相對定位的效果展示：

注意：

  1. 相對定位最重要的一點是，它可以透過邊偏移移動位置，但是原來的所佔的位置，繼續佔有。
  2. 其次，每次移動的位置，是以自己的左上角為基點移動（相對於自己來移動位置）

就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。 （相對定位不脫標）

如果說浮動的主要目的是讓多個區塊級元素一行顯示，那麼定位的主要價值就是移動位置， 讓盒子到我們想要的位置上去。

絕對定位absolute (拼爹型)

[注意] 如果文件可捲動，絕對定位元素會隨著它滾動，因為元素最終會相對於正常流的某一部分定位。

當position屬性的值為absolute時，可以將元素的定位模式設為絕對定位。

注意： 絕對定位最重要的一點是，它可以透過邊偏移移動位置，但它完全脫標，完全不佔位置。

絕對定位absolute又分成三種情況：

1.父級沒有定位

若所有父元素都沒有定位，以瀏覽器目前畫面為準對齊(document文檔)。

2.父級有定位

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

3.子絕父相※※

#這句話的意思是子級是絕對定位的話， 父級要用相對定位。

首先， 我們說下， 絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位。

是說，子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說， 子絕父絕，子絕父相都是正確的。 但是，極力推薦用相對位置

但是，在我們網頁佈局的時候， 最常說的 子絕父相是怎麼來的呢？請看如下圖：


所以，我們可以得到以下結論：

因為子級是絕對定位，不會佔有位置，可以放到父盒子裡面的任何一個地方。

父盒子佈局時，需要佔有位置，因此父親只能是 相對定位.

這就是子絕父相的由來。

絕對定位的盒子水平/垂直居中

普通的盒子是左右margin 改為auto就可， 但是對於絕對定位就無效了

#定位的盒子也可以水平或垂直居中，有演算法。

  1. 首先left 50% 父盒子的一半大小
  2. #然後走自己外邊距負的一半值就可以了 margin-left。

程式碼範例

<!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	p {
		width: 200px;
		height: 200px;
		background-color: pink;
		/*margin: 100px auto;*/
		/*float: left;*/
		position: absolute;
		/*加了定位 浮动的的盒子  margin 0 auto 失效了*/
		left: 50%;
		margin-left: -100px;
		top: 50%;
		margin-top: -100px;
	}
	</style></head><body>
	<p></p></body></html>

固定定位fixed(認死理型)

固定定位是絕對定位的一種特殊形式，類似於方塊是一個特殊的長方形。它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設定為固定定位。

當對元素設定固定定位後，它將脫離標準文件流的控制，並始終依據瀏覽器視窗定義自己的顯示位置。不管瀏覽器捲軸如何捲動也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置。

固定定位有兩點：

  1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
  2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

ie6等低版本浏览器不支持固定定位。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2; font-weight: 700

注意：

  1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
  2. 如果取值相同，则根据书写顺序，后来居上。
  3. 后面数字一定不能加单位。
  4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

值 描述
static #自動定位（預設定位方式）
relative 相對定位，相對於其原始文件流的位置進行定位
定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准
静态static 不脱标，正常模式 不可以 正常模式
相对定位relative 脱标，占有位置 可以 相对自身位置移动（自恋型）
绝对定位absolute 完全脱标，不占有位置 可以 相对于定位父级移动位置（拼爹型）
固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置（认死理型）

定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为行内块模式，

行内块 的宽度和高度 跟内容有关系

** 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。**

顺丰案例

css定位position屬性應如何用（實例詳解）

<!DOCTYPE html><html lang="en"><head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.sf {
			width: 1259px;
			height: 472px;
			margin: 100px auto;
			position: relative;
		}
		.nav {
			width: 960px;
			height: 80px;
			background-color: #000;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -480px;
		}
		.nav li {
			list-style-type: none;
			width: 160px;
			height: 80px;
			float: left;
		}
		.nav li a {
			width: 160px;
			height: 80px;
			display: block;
			text-align: center;
			line-height: 80px;
			color: #fff;
			text-decoration: none;
		}
		.nav li a:hover {
			color: #000;
			background-color: #fff;
		}

	</style></head><body>
	<p class="sf">
		<a href="#">
			<img src="images/sf.png" alt=""    style="max-width:90%" width="1259">
		</a>
		<p class="nav">
			<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>
			</ul>

		</p>
	</p></body></html>

（学习视频分享：css视频教程）

以上是css定位position屬性應如何用（實例詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html Static auto 堆 JS 选择器 外边距 position margin background 算法
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除
上一篇：css必須知道的盒子模型重點是什麼（整理分享）下一篇：css必須知道的盒子模型重點是什麼（整理分享）

相關文章

看更多