将div元素堆叠在一起

Question

我有一个网站，其布局如下所示:(下图）

在左侧面板上，我有一个显示徽标的div。我有另一个div，我想把它放在徽标下面，所以divs这些必须是彼此叠加的。我试着摆弄z-index，但并没有完全得到所谓的东西。 怎么办呢？

Answer 1

如果z-index无效，请尝试将徽标<div>嵌套在包装<div>中

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

Answer 2

参考： 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 3

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

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

Answer 4

我不确定您要实现的目标，但请尝试this，将值调整为您的布局

Answer 5

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