CSS层叠如何理解和应用，使用需注意什么？

发布时间：2022-04-11 16:58:28 所属栏目：语言来源：互联网

导读：这篇文章给大家分享的是CSS层叠的相关内容，本文介绍了CSS层叠是什么，层叠等级以及，z-index 对层叠等级的影响，对大家学习会有一定的帮助，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。层叠与层叠等级 HTML 元素是一个三维的概念，除了水平和

这篇文章给大家分享的是CSS层叠的相关内容，本文介绍了CSS层叠是什么，层叠等级以及，z-index 对层叠等级的影响，对大家学习会有一定的帮助，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

    层叠与层叠等级

    HTML 元素是一个三维的概念，除了水平和垂直方向外，还会在“z 轴”上层层叠加。既然是叠加，就会涉及到先后顺序的问题，规范中称之为“层叠等级”。
    默认情况下，图文是网页的核心，因此内联元素的等级理应最高；然后是布局，其中浮动元素（脱离文档流）的等级高于块级元素；最低等级是设置背景、边框等装饰属性的元素。

    例子：

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        padding: 10px;

    }

    .f div:last-of-type {
        background-color: rgba(221, 221, 255, .8);
        border: 1px dashed #000099;
        float: left;
        margin-top: -90px;
        margin-left: 30px;

</div>

    如果元素发生了层叠，层叠等级大的会覆盖小的；如果二者层叠等级相同，根据渲染的顺序，后者会覆盖前者。

    例子：

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        padding: 10px;
        overflow: hidden;
    }

    .f div:first-of-type,
    .f div:last-of-type {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        float: left。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

C++ search_n 函数用法	GDB print和display命
行逻辑链接的顺序表压	回看算法详解