CSS 5 定位网页布局总结元素显示与隐藏_display:block;position:absolute;z-index:200;visibi-CSDN博客

本文链接：https://blog.csdn.net/weixin_62302666/article/details/122970708

1.定位

1.定位

1.1为什么需要定位

提问：以下情况使用标准流或者浮动能实现吗？

1.某个元素可以自由的在一个盒子内移动，并且压住其他盒子

2.当我们滚动窗口时，盒子是固定屏幕某个位置的

1.2定位组成

1.3静态定位 static (了解)

1.4相对定位 relative（重要）

1.5绝对定位 absolute（重要）

1.6子绝父相的由来

1.7固定定位 fixed （重要）

1.8粘性定位 sticky （了解）

1.9定位的总结

1.10定位叠放顺序 z-index

1.11定位的扩展

5.如果一个盒子既有left属性又有right属性，则默认会执行left属性，同理 top bottom会执行top属性

2.网页布局总结

3.元素的显示和隐藏

3.1display属性

3.2visibility可见性

3.3overflow溢出

3.4元素显示与隐藏案例

    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 0 auto;
        }
        
        .tudou img {
            width: 100%;
            height: 100%;
        }
        
        .mask {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(../jpgs/bofang.png) no-repeat center;
        }
        /* 当我们鼠标经过土豆这个盒子时，就让里面遮罩层显示出来 */
        
        .tudou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="../jpgs/土豆.png" alt="">
    </div>
</body>