给文档流增加透明度:
1、 透明度opacity值为0到1,即[0,1]
/*透明度opacity值越小,越透明,如果将某个div的透明度设置成0,那这个div就看不见了 */
/* opacity: 0.4; */
2、通过z-index来设置哪个div在最表面,哪个在最下面
一、代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进阶版文档流 (文档流加透明度、通过z-index来设置哪个div在最表面最下面这种的顺序 )</title>
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
/* id选择器: 在style样式中写 #id名 */
#div1{
width: 200px;
height: 200px;
background-color: red;
/*position的值有static表示静态定位 absolute绝对定位 fixed固定定位 relative相对定位 sticky粘性定位*/
/*position的值是absolute 绝对定位时,会脱离文档流,形成一个新的层 */
position:absolute;
left:30px;
top: 20px;
/* 绝对定位 里left、top的距离:参照物是“已定位”的父节点!
如果父节点未定位,则一直往上追溯,直到找到定位的节点,
如果一直未找到,则以html为父节点,
注意:已定位的父节点,指的是父节点的position的值不是static,
只要不是static,是别的比如absolute、relative、fixed都视为 父节点已定位
所以这个div1中left:30px ; top: 20px 是相对于html来说的*/
/*再比如刚刚这个div1,因为它是absolute绝对定位,假如left和top都是0px,
因为div1的父节点没有定位,那么就按照这个规则一直往上追溯,最终会以html为准。
而相对于html来说,left和top都是0px;所以最后这个红色的div1就会紧挨着我们的html,
为了看出效果,我们特地给body和html都加了边框,我们可以很清楚的看出效果来,取消注释就能观察到
left:0px;
top: 0px;
*/
/*
对比记忆一下这个知识:只有absolute定位的left、top、right、bottom的值,参照物是“已定位”的父节点
相对定位relative的left、top、right、bottom的值,是相对于自己原来的位置来说的
*/
z-index: 3;
}
#div2{
width: 500px;
height: 500px;
background-color: green;
position:absolute;
/* 透明度opacity值为0到1,即[0,1] */
/*透明度opacity值越小,越透明,如果将绿色的这个div的透明度设置成0,那绿色的这个div就看不见了 */
/* opacity: 0.4; */
/*除了静态定位static之外,其余所有定位方式都可通过z-index的值设定三个div在俯视方向上,
谁在上,谁在下,值越大,在最上方,值越小,在最下面,
例如本例中红色div的z-index是3,绿色div的z-index是2,
说明从俯视角度来看,红色div在绿色div上面
但是,还是那句话,不管你要给某个div设置 left、top、right、bottom的值,还是设置z-index的值,
那他们的定位方式,都不能是static,如果position的值是static的话,这些额外写的效果都不生效,
所以为了能生效,你可以把position定位成除static之外的absolute、relative、fixed都可以
*/
z-index:2;
}
#div3{
width: 800px;
height: 800px;
background-color: blue;
position:static;
left:60px;
z-index: 5;
/* 由于这里div3的定位方式是static
所以它的 left、top、right、bottom的值,或者给它设置z-index的值,都不生效
*/
}
/*
body{
border: red 4px solid;
}
html{
border: black 6px solid;
} */
</style>
<body>
<div id="div1">
1
</div>
<div id="div2">
2
</div>
<div id="div3">
3
</div>
</body>
</html>
二、效果图: