zoukankan      html  css  js  c++  java
  • 给伪类设置z-index= -1;

    .column{
        position: relative;
        float: left;
        padding: 30px 0;
         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,

  • 相关阅读:
    C/C++一些库函数的实现
    约瑟夫环问题(Josephus)
    union关键字及大小端模式
    指针数组和数组指针
    巧用位运算
    C/C++生成可执行文件过程
    C语言+Modbus+NXP整体规划
    bug和待完善
    python学习第二课
    python学习第一课
  • 原文地址:https://www.cnblogs.com/yqlog/p/5151843.html
Copyright © 2011-2022 走看看