Question

这很难解释所以我把这个JSFiddle放在一起。我希望黑色div穿过蓝色框，以便黑色div位于水平蓝线下方。所以我希望<div class="title">Testing</div>覆盖<div class="middleFifth">

http://jsfiddle.net/Zhxt9/

事先提前TIA抱歉说不好！

Answer 1

你可以相对定位黑色div并设置z-index使其位于蓝色div后面（也必须在蓝色div上指定z-index）。

.title{
    width:100%; float:left; 
    background-color:black;
    position: relative;
    top: -50px;
    z-index: 0;
}

Updated Fiddle

Answer 2

尝试：

.title{
    margin-top: -50px;
}

http://jsfiddle.net/Zhxt9/1/

或其他选项是：

.title {
    position: relative;
    top: -50px;
}

或：

.title {
    position: absolute;
    top: 50px;
}

取决于页面的其余部分

Answer 3

不完全确定你的目标是什么，但你可以尝试类似的东西：

.title{
    width:100%; 
    float:left; 
    background-color:black;

    /* Below properties are what I added */
    position: absolute;
    top: 40px;
    z-index: -10; 
}

显然你应该通过在其他元素上设置它来将z-index更改为更合理的值，但为了简单起见，我将其包含在此处。

在div中叠加图像？

3 个答案: