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>