Question

我在div a上有一个画布，在div b上有一个gif图像。我想要做的是通过将display: none;放在div b之上来隐藏我的画布而不使用div a。

我之前通过使用display none隐藏div a来实现它。但现在我希望div a留在那里，而div b漂浮在它上面。

这是当前的情况：JSFiddle

Answer 1

在div a上以绝对位置尝试它。请注意

margin: 0 auto;

在这里不起作用。所以使用'left'和'margin-left'来解决这个问题。

jsfiddle

Answer 2

我会将您想要堆叠的两个元素包装在容器div中，并将div .b放在div .a上。

＆＃13;

.a, .b { 
    width: 200px; 
    height: 30px; 
    text-align: center; 
}

.wrap{
    position: relative;
    margin: 0 auto; 
    width: 200px; 
    height: 30px; 
}

.a { 
    border: 1px solid red; 
    background: red;
}
.b { 
    border: 1px solid green; 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: blue;
}

.container {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}

.xtra {
    width: 100%;
    height: 150px;
    background: #000;
}

＆＃13;

<div class="container">
    <div class="xtra"></div>
    
    <div class="wrap">
        <div class="a">div a</div>
        <div class="b">div b</div>
    </div>
</div>

＆＃13;

<强> UPDATED FIDDLE

Answer 3

你可以position他们absolute并将z-index设置为.b。

.a, .b {
    margin: 0 auto;
    width: 200px;
    height: 30px;
    text-align: center;
}
.a {
    border: 1px solid red;
    position: absolute;
}
.b {
    border: 1px solid green;
    position: absolute;
    z-index: 1;
}
.container {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}
.xtra {
    width: 100%;
    height: 150px;
    background: #000;
}

<div class="container">
    <div class="xtra"></div>
    <div class="a">div a</div>
    <div class="b">div b</div>
</div>

将第二个div放在第一个div之上

3 个答案: