辛星和你徹底搞清CSS中的相對定位和絕對定位

weixin_34037977發表於2017-08-02
CSS

    前面我在解讀CSS中也說過了關於相對定位和絕對定位的問題。無奈還是有些童鞋表示迷茫，於是另開一篇部落格，來具體解讀相對定位和絕對定位。希望可以以我的點點星光，讓後來者少走彎路。

     所謂相對定位，就是設定為相對定位的元素會偏移某個距離，元素仍然保持原來的樣式，它會保留該HTML元素的空間，比方我們看例如以下程式碼：

.demo{
position: relative;
width:50px;
height: 50px;
left:50px;
}
它會出如今相對原來的地方向右50px的地方，而它原來所在的地方為空。

以下說一下絕對定位，所謂絕對定位。即不佔用空間，假設原來這個地方有HTML元素，那麼就會重疊，這裡須要特別之處的，也是我發這篇博文的目的，就是想告訴大家，絕對定位假設被父元素包括，假設父元素沒有定位屬性，它會依據body進行定位，因此，假設它有父元素，必須在父元素中指定定位屬性。例如以下程式碼：

<html>
<head>
	<title>辛星解讀絕對定位和相對定位</title>
	<style type="text/css">
	.father{
		position: relative;
		width:300px;
		height: 300px;
		margin: 0 auto;
		border: 1px solid orange;
		}
	.sun{
		position:absolute;
		background:purple;
		width:50px;
		height: 50px;
		left: 50px;
		}
	</style>
</head>
<div class = "father">
	<div class = "sun"></div>
</div>
</html>

效果圖：


可能有童鞋會問，假設我們不指定父元素的定位又會怎樣呢？請看以下程式碼。我把css程式碼中的哪一行給凝視掉之後，原始碼例如以下：

<html>
<head>
	<title>辛星解讀絕對定位和相對定位</title>
	<style type="text/css">
	.father{
		//position: relative;
		width:300px;
		height: 300px;
		margin: 0 auto;
		border: 1px solid orange;
		}
	.sun{
		position:absolute;
		background:purple;
		width:50px;
		height: 50px;
		left: 50px;
		}
	</style>
</head>
<div class = "father">
	<div class = "sun"></div>
</div>
</html>

然後是它的效果圖：



以上就是我介紹的關於絕對定位和相對定位的問題，假設您有什麼問題或者不解，能夠在以下留言。謝謝。

相關文章