Question

我想将图片上方的箭头（：after）放在图像上方，但z-index不起作用。

我在html中有这段代码

<div class="example clearfix">
    <div class="element item-large">
        <div class="item-text">
            <span>march 15, 2015</span>
            <h2>Chapter One</h2>
            <p>Lorem ipsum dolor sit amet, <br /> consectetur adipisicing elit. Qui, aspernatur!</p>
        </div>

        <div class="item-image">
            <img src="assets/images/box-1.jpg">
        </div>
    </div>
    <div class="element item">
        <img src="assets/images/box-2.jpg">
    </div>
</div>  <!-- end example -->

这在CSS中

.example{
    width: 100%;
    position: relative;
    height: auto;
}

    .example img{
        width: 100%;
        display: block;
        max-width: 100%;
        height: 100%;
        max-width: 100%;
    }

    .example .item-large{
        width: 70%;
        height: 300px;
        float: left;
        position: relative;
    }

    .example .item{
        width: 30%;
        height: 300px;
        float: left;
        position: relative;
    }

        .example .item-image{
            width: 30%;
            height: 300px;
            float: left;
            overflow: hidden;
            z-index: 10;
        }

        .example .item-large .item-text{
            padding: 50px;
            width: 70%;
            height: 300px;
            float: left;
            overflow: hidden;
            z-index: 10;
            background-color: #fff;
            position: relative;
        }

        .example .item-large .item-image-large{
            width: 100%;
            height: 300px;
            float: left;
            overflow: hidden;
            z-index: 10;
        }

.item-text{
    position: relative;
}

.item-text:after{
    content: " ";
    position: absolute;
    right: -15px;
    top: 15px;
    border-top: 15px solid transparent;
    border-right: none;
    border-left: 15px solid black;
    border-bottom: 15px solid transparent;
    z-index: 10;
}

有谁能告诉我为什么z-index在我的情况下不起作用???提前谢谢。

https://jsfiddle.net/sgmq70L4/embedded/result/

Answer 1

如果您对 z-index 的工作方式感兴趣，请查看本文，其中解释了它的来龙去脉。 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Z-index不支持伪

1 个答案: