给伪类设置z-index= -1;

最新推荐文章于 2023-07-26 12:53:08 发布

每天都有进步

最新推荐文章于 2023-07-26 12:53:08 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/weixin_37141881/article/details/53991649

HTML5 专栏收录该内容

60 篇文章

订阅专栏

本文探讨了CSS中.button伪元素:before的应用技巧及其与z-index属性的关系。通过实例讲解了如何利用这些特性来实现复杂的视觉效果，并解释了为什么需要调整.button:before的z-index值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.column{
    position: relative;
    float: left;
    padding: 30px 0;
    width: 25%;
    z-index: 0;
    background-color: orange;
    text-align: center;
}


.button:before,.button:after{
    content: '';
    position: absolute;
}

.button:before{
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    z-index:-1;
    border-radius: 9px;
}

.button.red:before{
    background: #d02e17;
    background-image: linear-gradient(to bottom, #b32511, #ffffff);

}

.button {
    display: inline-block;
    position: relative;
    height: 33px;
    line-height: 33px;
    background-image: linear-gradient(to bottom,#e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
    border: #000000 1px dotted;
    box-shadow: 0 2px 1px rgba(0,0,0,0.25);
}

　　其中将.button:before 的z-index = -1;是因为.button 和.button的伪类（新加的一个Box）为同一级的，而.button 默认为0,修改其中的z-index其实修改的是子元素的z-Index,所以无论怎样修改，.button中的元素也会在伪类的下面，因此只能修改伪类的z-index; 而将.column的z-index设为0，其实是postion为relative时，设置z-index，才会将其加入context-stack，