Question

我有两个div，从上到下。我需要一个图像在两个div的顶部。我已经在IE中使用它（使用此代码）。但它只是在Chrome上失败了。

在我看来，Chrome只是忽略了我的手册z-index，即使它说它不在Dev Tools中。

如何让outer-div 1中的图像重叠outerdiv和inner-div 2？

HTML：

<div class="outer">
    <div class="inner">
        <p>Foo</p>
        <img src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Wiki_Makes_Video_logo.png" alt="Demonstration image. This image is in the public domain." id="image" />
    </div>
</div>
<div class="outer">
    <div class="inner">
        <p>Bar.</p>
    </div>
</div>

CSS：

* { margin: 0; padding: 0; }

.outer
{
    width: 100%;
    height: 200px;

    -webkit-transform: skewY(-3deg);

    background-color: lightgray;
}

.inner
{
    width: 80%;
    height: 200px;

    margin: 0 auto;

    -webkit-transform: skewY(3deg);

    background-color: gray;

    text-align: center;
}

#image
{
    width: 300px;
    height: 100px;

    margin-top: 140px;
    z-index: 10;
}

Answer 1

如果您不想要任何其他效果，则需要为z-index指定position，例如position: relative。

为了解决您的问题，您还需要使用z-index在底部显示两个顶部div，例如 Fiddle

Answer 2

针对z-index

指定position:relative;

Answer 3

您必须使用position: absolute来使用z-index。请参阅此fiddle。

图像不与第二个外部重叠

3 个答案: