02-CSS基础与进阶-day9_2018-09-12-21-27-10

àì夳堔傛蜴生んèń 2022-01-05 11:47 119阅读 0赞

z-index  
当对多个元素设置定位时,重叠的定位元素可以通过z-index调整堆叠顺序 其值可以为0 正数 负数  
特点 1 z-index默认值为0 取值越大 定位元素在层叠元素上越局上  
2 z-index取值一样，后来居上  
3 z-index值不能加单位  
4 只有定位元素才有该属性，其余如浮动等都无此属性  
**元素的显示和隐藏**  
 **display: none; /\* 隐藏元素 不是删除 只不过看不见 不保留位置\*/**  
 **visibility: hidden;/\*隐藏元素 它保留位置\*/**

05元素显示与隐藏.html

![1603260-20190623105022015-1247230518.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div {
         
                width: 120px;
                height: 120px;
                background-color: red;
                margin-bottom: 10px;
            }
    
            div:nth-child(2) {
         
                /* display: none; */ /* 隐藏元素 不是删除 只不过看不见 不保留位置*/
                visibility: hidden;/*隐藏元素 它保留位置 visiable*/
            }
    
            div:last-child {
         
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
    </html>

转载于:https://www.cnblogs.com/HiJackykun/p/11072049.html

[1603260-20190623105022015-1247230518.png]: /images/20211229/02eb892656bb40ae861fad3fdfd5641f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 02-CSS基础与进阶-day9_2018-09-12-20-47-19

定位静态定位 position: static 相对定位 position: relative 绝对定位 position: absolute 脱标参考点

╰+攻爆jí腚メ/ 2022年01月05日 11:47/ 0 赞/ 110 阅读

相关 02-CSS基础与进阶-day9_2018-09-12-21-27-10

z-index 当对多个元素设置定位时,重叠的定位元素可以通过z-index调整堆叠顺序其值可以为0 正数负数特点 1 z-index默认值为0 取值越大定位元

àì夳堔傛蜴生んèń/ 2022年01月05日 11:47/ 0 赞/ 120 阅读

相关 02-CSS基础与进阶-day11_2018-09-17-20-08-19

本次内容字体图标 css3 2d和3d 字体图标优点 1 可以做出和图片一样的事情 2 本质是文字，所以可以任意去修改颜色大小阴影。。。。 3

╰+哭是因爲堅強的太久メ/ 2022年01月05日 11:47/ 0 赞/ 126 阅读

相关 02-CSS基础与进阶-day5_2018-09-03-22-10-39

08盒模型之margin.html ![1603260-20190618222955976-666128604.png][] <!DOCTYPE html>

系统管理员/ 2022年01月05日 11:43/ 0 赞/ 139 阅读

相关 02-CSS基础与进阶-day4__2018-08-31-21-02-19

css 文字阴影(css3) text-shadow: 水平位置垂直位置模糊距离阴影颜色层叠性 1 含义多种css样式叠加,浏览器处理冲突的一种能力

太过爱你忘了你带给我的痛/ 2022年01月05日 11:43/ 0 赞/ 115 阅读

相关 02-CSS基础与进阶-day6_2018-09-05-20-39-21

盒模型 width height border padding margin 浏览器会给元素一个默认样式，一般我们会重置浏览器默认样式 \ \{

比眉伴天荒/ 2022年01月05日 11:43/ 0 赞/ 129 阅读

相关 02-CSS基础与进阶-day4_2018-08-31-22-09-21

08权重精华题.html ![1603260-20190618203947222-768307424.png][] <!DOCTYPE html>

淡淡的烟草味﹌/ 2022年01月05日 11:41/ 0 赞/ 113 阅读

相关 02-CSS基础与进阶-day5_2018-09-03-21-25-22

盒子模型（重点） 1 HTML的元素可以看成一个矩形的盒子，每个盒子都是由内容、内边距、外边距、边框组成网页布局的本质-----很多矩形盒子组合而成 2 B

冷不防/ 2022年01月05日 11:39/ 0 赞/ 143 阅读

相关 02-CSS基础与进阶-day9_2018-09-12-21-02-40

定位静态定位 position: static 相对定位 position: relative 绝对定位 position: absolute 脱标参考点

小鱼儿/ 2021年12月11日 04:34/ 0 赞/ 142 阅读

相关 02-CSS基础与进阶-day6_2018-09-05-21-51-42

07css3盒模型.html ![1603260-20190620214720837-873350246.png][] <!DOCTYPE html>

淩亂°似流年/ 2021年12月11日 04:34/ 0 赞/ 136 阅读