Question

我正在尝试按下这样的按钮：

现在我首先虽然我可以使用附加到按钮的:: after元素来设置样式。

目前我有这个（使用sass语法）：

button {
    min-width: 230px;
    border: 1px solid green;
    background-color: white;
    padding: 25px;
    display: block;
    position: relative;
    z-index: 10;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 10px;
      left: 10px;
      width: 100%;
      height: 100%;
      border: 1px solid green;
      background-color: white;
      z-index: -2;

    }
}

但这会产生一些看起来有点不同的东西：

右边的矩形是我的:after元素。它确实在文本«Button»背后（没有z-Index它只是在前面），但它不会落后于另一个矩形。

我怎样才能正确设计这个样式？

感谢您的帮助

干杯

Answer 1

从按钮中删除z-index: 10。当父元素（在这种情况下为button）具有z-index值时，它将成为堆叠上下文的根元素，并且您无法移动其下的子元素。

您可以在精彩的文章What No One Told You About Z-Index中阅读有关堆叠上下文和堆叠顺序的详情。

button {
  min-width: 230px;
  border: 1px solid green;
  background-color: white;
  padding: 25px;
  display: block;
  position: relative;
}

button::after {
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  background-color: white;
  z-index: -1;
}

body {
  padding: 20px;
}

<button>Button</button>

Answer 2

我在代码中添加了一些小东西。但这似乎对我有用。可能有一种更简单的方法，但翻转，翻转工作。：）

button {
  min-width: 230px;
  border: 1px solid green;
  background-color: white;
  padding: 25px;
  display: block;
  position: relative; 
  left: 20px;
   z-index: 10;  
  transform: rotateY(180deg);
}

button::after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  background-color: white;
  z-index: -1;
  
}
.buttonz{
   transform: rotateY(180deg);
}

   
<button>
<div class="buttonz">
  Button
</div>

</button>

按钮样式与:: after伪元素

2 个答案: