给文档流增加透明度opacity、设置z-index的值

最新推荐文章于 2023-03-02 14:26:17 发布

温婉婉

最新推荐文章于 2023-03-02 14:26:17 发布

阅读量126

点赞数

分类专栏： HTML CSS3 div 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_48796690/article/details/127227440

版权

HTML 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

CSS3

16 篇文章 0 订阅

订阅专栏

div

16 篇文章 0 订阅

订阅专栏

给文档流增加透明度：

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>