动态cs直观显示区别：static absolute relative fixed

最新推荐文章于 2023-01-28 23:59:32 发布

黄二马

最新推荐文章于 2023-01-28 23:59:32 发布

阅读量976

点赞数 1

本文链接：https://blog.csdn.net/xiaoliang98/article/details/109608635

版权

java web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

static 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>

黄二马

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态cs直观显示区别：static absolute relative fixed

position: absolute relative fixed 之间的关系static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 TRBL 定位，并且可以通过z-index进行层次分级。absolute(绝对定位) 脱离文档流，通过TRBL定位. 使用absolute绝对定位时,冒泡最近的带有 absolute/ relative的父级，如没有则冒泡至body的TRB
复制链接

扫一扫

专栏目录