Question

为什么伪元素位于父元素内的img下，而不是父元素下面。我在父元素中放置了一个填充，将它相对定位并将其z-indexed为9，而：before - absolute和z-indexed -1？

我发生的事情是：之前是img元素，它应该在父元素之下。

HTML：

<div class="thumbnail">
    <img src = "some_url" />
</div>

CSS：

.thumbnail{
    height: 131px;
    max-height: 131px;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 5px -2px #000;
    margin-bottom: 20px;
    padding: 5px;
    position: relative;
    z-index: 1;
}
.thumbnail:before,
.thumbnail:after{
    bottom: 0px;
    display: block;
    content: ' ';
    width: 33%;
    height: 10px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
    background: #000;
    z-index: -1;
}
.thumbnail:before{
    left: 5px;
    transform: rotate(-6deg);
}
.thumbnail:after{
    right: 5px;
    transform: rotate(6deg);
}
img{
    height: 100%;
    width: 100%;
    box-shadow: 0 0 10px -3px #000;
}

Answer 1

Psuedo课程：之前和之后没必要按照他们的说法去做。它们作为您创建它们的元素的子内容输入。它们只是在该内容中的任何元素之前或之后出现。通过转到http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/并转到之前或之后的内容部分，可以找到一些很好的解释。

<div class="thumbnail">
    .thumbnail:before
        <img>
        <p>
        .....
    .thumbnail:after
</div>

jsfiddle对我来说很好看

css中父元素下面的伪元素

1 个答案: