html - 将 div 元素相互堆叠

Question

我有一个网站，其中的布局看起来像这样：（下图）

在左侧面板上，我有一个显示徽标的 div。我有另一个 div，我想将其放在徽标下方，因此divs必须将它们堆叠在一起。我尝试摆弄 z-indexes，但并没有完全得到所需的东西。如何才能做到这一点？

Answer 1

参考： jsFiddle Logo Demo

状态更新： jsFiddle Logo Demo Just Border Version

上面的 jsFiddle在CSS 部分中有大量注释，因此您可以了解如何设置您的特定徽标。

HTML：

<div id="logoHolder">
    <div id="logoContent">
      <div id="logoImage"></div>
    </div>
</div>

CSS：

#logoHolder {
    width: 296px;
    height: 296px;
    background-color: white;
    border: 3px solid red;
}

#logoContent {
    width: 256px;
    height: 256px;
    padding: 20px;
    position: relative;
    border: 1px solid black;
}

#logoImage {
    background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: aqua;
    height: 100%;
}

Answer 2

如果z-index对您不起作用，请尝试将徽标嵌套在类似这样<div>的包装器中<div>

<div> <!--div container to hold the logo div-->
 <div><!--Logo div--></div>
</div>

Answer 3

尝试使用position: absolute; 使用 z-index 时，而不是两个元素的相对值。然后它会在您的布局中产生一些失真，因此您可以将徽标 div 放在另一个相对 div 中或使用其他一些技术来修复它，但是在使用绝对位置和 z-index 时它必须工作。如果它仍然不起作用，请检查您的某些 javascript 是否没有干扰，或者您的代码中的某些其他元素是否具有 z-index，因此是导致问题的原因。

如果使用绝对位置，不要忘记定义margin-left和margin-top。

Answer 4

我不确定你想要达到什么目标，但试试这个，让值适应你的布局

Answer 5

尝试使用该margin属性，如您的图像所示。如果您将右侧 div 设置margin-left为负值，则右侧 div 将移动到徽标 div 的下方/上方。