動態HTML解釋：static absolute relative fixed

有山碼農發表於2020-11-10
HTML

position: absolute relative fixed 之間的關係

static(靜態) 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。

relative(相對定位) 物件不可層疊、 不脫離文件流，參考自身靜態位置通過 TRBL 定位，並且 可以通過z-index進行層次分級。

absolute(絕對定位) 脫離文件流，通過TRBL定位. 使用absolute絕對定位時,冒泡最近的帶有 absolute/ relative的 父級，如沒有則冒 泡至body的TRBL為止， 可z-index進行層次分級。

fixed（固定定位） 這裡所固定的參照對像是 可視視窗而並非是body或是父級元素。 可通過z-index進行層次分級。

注：CSS中定位的層疊分級： z-index: auto | number (auto 遵從其父物件的定位; number 無單位的整數值。可為負數)

詳情見html程式碼：簡單直接

在這裡插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>position</title>
		<style>
			.div_big{
				background-color: red;
				width: 200px;
				height: 200px;
				top: 100px;
				left: 100px;
			}
			.div_min{
				background-color: yellow;
				width: 150px;
				height: 150px;
				top: 100px;
				left: 100px;
			}
			.div_father{
				background-color:#FFEBCD;
				width: 600px;
				height:2600px;
			}
		</style>
		<script >
			function changeposition(){
				 big_type=document.getElementById("big");
				 min_type=document.getElementById("min");
				 choose=document.getElementById("idSel");
				 explain=document.getElementById("explain");
				explain.innerText="position："+choose.value+"";
				big_type.style.position=choose.value;
				min_type.style.position=choose.value;
			}
			var flag=true;
			function changeIndex(){
				if(flag){
					big_type.style.zIndex=5;
					min_type.style.zIndex=4;
					flag=!flag;
				}else{
					big_type.style.zIndex=4;
					min_type.style.zIndex=5;
					flag=!flag;
				}
			}
		</script>
	</head>
	<body>
		<button id="z_index" onclick="changeIndex();">點我交換zIndex</button>
		<select id="idSel" onchange="changeposition();">
		<option value="null">---請選擇---
		<option value="static">static
		<option value="absolute">absolute
		<option value="relative">relative
		<option value="fixed">fixed
		</select>
		<br/>
		<div class="div_father">
			<h4 id="explain">請選擇標籤 預設是static </h4>
			<div id="big" class="div_big"> 大標籤 </div>
			<div id="min" class="div_min"> 小標籤</div>
		</div>
	</body>
</html>

相關文章