Question

我有以下CSS将before伪元素放在实际元素之上，但我需要它出现在下面。

这可能吗？我已经看过很多类似的帖子并接受了所有的建议，但仍然无法让它发挥作用。有什么想法吗？

div {
      height: 224px;
      width: 294px;
      border:7px solid #FFF;
      box-shadow: 2px 2px 5px;
      margin:50px;
      -ms-transform: rotate(-3deg); /* IE 9 */
      -webkit-transform: rotate(-3deg);  /*Chrome, Safari, Opera */
      transform: rotate(-3deg);
      z-index:auto;
      background:red;
      position: relative;
    }

div::before {
      height: 224px;
      width: 294px;
      border:7px solid #FFF;
      box-shadow: 2px 2px 5px;
      -ms-transform: rotate(6deg); /* IE 9 */
      -webkit-transform: rotate(6deg);  /*Chrome, Safari, Opera */
      transform: rotate(6deg);
      background:blue;
      display:block;
      content:'';
      z-index:-1;
      position:absolute;
    }

Answer 1

问题在于transform属性。位置项目不会很好。在没有transform的情况下看看下面的小提琴。

http://jsfiddle.net/kiranvarthi/6wsyqrwx/7/

div {
      height: 224px;
      width: 294px;
      border:7px solid #FFF;
      box-shadow: 2px 2px 5px;
      margin:50px;
      z-index:auto;
      background:red;
      position: relative;
    }

div::before {
      height: 224px;
      width: 294px;
      border:7px solid #FFF;
      box-shadow: 2px 2px 5px;
      background:blue;
      display:block;
      content:'bottom';
      z-index:-1;
      position:absolute;
    }

Answer 2

正如Kiran Varthi在他的回答中提到的，由于transform属性，这似乎是一个问题。您可以使用::after伪元素而不是样式div来实现所需的效果。

＆＃13;

div {
      height: 238px;
      width: 308px;
      margin:50px;
      position: relative;
    }
div::after {
      height: 224px;
      width: 294px;
      border:7px solid #FFF;
      box-shadow: 2px 2px 5px;
      -ms-transform: rotate(-3deg); /* IE 9 */
      -webkit-transform: rotate(-3deg);  /*Chrome, Safari, Opera */
      transform: rotate(-3deg);
      display:block;
      content:'top';
      background:red;
      position: absolute;
    }
div::before {
      height: 224px;
      width: 294px;
      border:7px solid #FFF;
      box-shadow: 2px 2px 5px;
      -ms-transform: rotate(6deg); /* IE 9 */
      -webkit-transform: rotate(6deg);  /*Chrome, Safari, Opera */
      transform: rotate(6deg);
      background:blue;
      display:block;
      content:'bottom';
      position:absolute;
    }

＆＃13;

<div></div>

＆＃13;

JS小提琴： http://jsfiddle.net/tkd3L6ns/

Answer 3

您可以切换divs个地点 - 将:after放在 top 元素上：

div {
    height: 224px;
    width: 294px;
    border:7px solid #FFF;
    box-shadow: 2px 2px 5px;
    -ms-transform: rotate(6deg);
    /* IE 9 */
    -webkit-transform: rotate(6deg);
    /*Chrome, Safari, Opera */
    transform: rotate(6deg);
    background:blue;
    position:relative;
}
div:after {
    content:'top';
    position:absolute;
    height: 224px;
    width: 294px;
    border:7px solid #FFF;
    box-shadow: 2px 2px 5px;
    margin:50px;
    -ms-transform: rotate(-3deg);
    /* IE 9 */
    -webkit-transform: rotate(-3deg);
    /*Chrome, Safari, Opera */
    transform: rotate(-3deg);
    background:red;
}

<div>bottom</div>

JSFiddle

注意：我没有像你那样定位它们，这只是表明可以使用一个伪元素（:after）并使用transform来完成。

CSS将before伪元素显示在实际元素下方

3 个答案: