position:relative 的深入理解，歡迎探討

阿新 • • 發佈：2019-01-20

對於css中的position:relative;我始終搞不明白它是什麼意思，有什麼作用？

對於position的其它幾個屬性，我都搞懂了

引用
static : 　無特殊定位，物件遵循HTML定位規則
absolute : 　將物件從文件流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時物件不具有邊距，但仍有補白和邊框
relative : 　物件不可層疊，但將依據left，right，top，bottom等屬性在正常文件流中偏移位置
fixed : 　IE5.5及NS6尚不支援此屬性

對於文件中所說的幾個屬性，除了relative，其它的一試，就效果出來了，對於個relative

，真是難理解。

要說是相對定位嘛，也不是。

對於頁面中一個static的div#demo，我想讓這個#demo裡的一個div#sub相對於#demo定位在右上角的某個地方，應該是用這個position:relative這個吧，然後再加上top,right給限制一下。
我理解得沒有錯吧?

不過在現實開發中，我卻常常得不到預期的效果。我覺得應該是我對這個屬性還沒有理解透。現在我想完全掌握這個，就像position:absolute那樣地掌握它，想怎麼弄html元素就怎麼弄HTML元素。
請理解這一點的朋友們給講講，或者給點資料，連結之類的也可以。

案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>position</title>
<style type="text/css">
	<!--
	body{
		font-size:12px;
		margin:0 auto;
	}

	div#demo{
		position:relative;
		border:1px solid #000;
		margin:50px;
		top:-50px;
		line-height:18px;
		overflow:hidden;
		clear:both;
		height:1%;
	}

	div#sub{
		position:absolute;
		right:10px;
		top:10px;
	}

	div.relative{
		position:relative;
		left:400px;
		top:-20px;
	}

	div.static,div.fixed,div.absolute,div.relative{
		width:300px;	
	}

	div.static{
		background-color:#bbb;
		position:static;
	}

	div.fixed{
		background-color:#ffc0cb;
	}

	div.absolute{
		background-color:#b0c4de;
	}

	div.relative{
		background-color:#ffe4e1;
	}
	-->
</style>
</head>
<body>
	<div id="demo">
		<div class="static">static: 預設值。無特殊定位，物件遵循HTML定位規則 </div>
		<div id="sub" class="absolute">absolute: 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的一個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z-index屬性定義 </div>
		<div class="fixed">fixed:未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範 </div>
		<div class="relative">relative:物件不可層疊，但將依據 left,right,top,bottom 等屬性在正常文件流中偏移位置 </div>
	</div>
</body>
</html>

position:relative 的深入理解，歡迎探討

position:relative 的深入理解，歡迎探討

對象的深度拓展$.extend(true,{},a,b)，深入理解，小心陷阱

$Django-setting.py配置，GET、POST深入理解，三件套,orm物件關係對映簡介

hash函式 hashMap的深入理解，jdk8 hashMap加入紅黑樹演算法

如何將量子鏈引入業務系統，使用JSON-RPC與錢包通訊（內附區塊鏈學習論，個人理解，歡迎交流）

Auto Layout深入理解，及masonry簡介

小程式元件集合-（陸續更新中，歡迎探討~）

z-index和position的深入理解-css

PRODUCT_COPY_FILES的深入理解，為何不能在Android.mk使用

CSS深入理解學習筆記之relative

Python讀取excel表格時，意外的深入理解info字典問題

JavaScript 函數聲明，函數表達式，匿名函數的區別，深入理解立即執行函數(function(){…})()

2.2 logistic回歸損失函數（非常重要，深入理解）

對find，xargs，grep和管道的一些深入理解

更好的理解position:relative的應用

理解CSS的position:relative

通過案例理解position:relative和position:absolute

對阻塞，非阻塞，同步，異步的深入理解

CSS外邊距屬性，深入理解margin

深入理解並發/並行，阻塞/非阻塞，同步/異步【轉】

position:relative 的深入理解，歡迎探討

相關推薦