将div元素相互叠加

I have a website in which the layout looks something like this: (image below)

我有一个网站的布局是这样的:(下图)

On the left panel, I have a div which displays a logo. I have another div which I want to put beneath the logo and so divs these have to be these stacked over each other. I tried fiddling with the z-indexes, but didn't quite get the rquired thing. How can this be done?

在左边的面板上，我有一个显示徽标的div。我有另一个div我想把它放在logo的下面，所以div必须把它们叠在一起。我试着修改z索引，但没有得到真正需要的东西。这是怎么做到的呢?

5 个解决方案

#1

Try to use also position: absolute; instead of relative for both elements when using z-index. Then it can make some distortion in your layout, so you can put the logo divs inside another relative div or use some other technique to fix it, however it must work when using position absolute and z-index. If it is still not working, check if some of your javascript is not interfering or if some other elements in your code have z-index, so it is causing the problems.

也尽量使用位置:绝对;使用z索引时，而不是相对于这两个元素。然后它会在你的布局中造成一些扭曲，所以你可以把logo div放在另一个相关的div中，或者使用其他的技术来修复它，但是它必须在使用位置绝对和z索引时起作用。如果它仍然不能工作，请检查您的一些javascript是否没有受到干扰，或者代码中的其他元素是否具有z-index，从而导致问题。

If using position absolute, do not forget to define margin-left and margin-top.

如果使用的是绝对位置，不要忘记定义边距和边距。

#2

If z-index is not working for you try nesting the logo <div> in a wrapper <div> something like this

如果z-index不起作用，请尝试将徽标

嵌套到包装器

中，如下所示

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

#3

Reference: jsFiddle Logo Demo

参考:jsFiddle标志演示

Status Update: jsFiddle Logo Demo Just Border Version

状态更新:jsFiddle标识Demo只是边框版本

The above jsFiddle has extensive notes in the CSS Section so you can understand how to setup your specific Logo.

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

HTML:

HTML:

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

CSS:

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%;
}

#4

I'm not sure what you want to achieve but try this, adapting the values to your layout

我不确定您想要实现什么，但是尝试一下，将这些值调整到您的布局中。

#5

Try using the margin property, as shown in your image. If you put margin-left as a negative value for the right-side div, then the right-side div will move below/above the logo div.

尝试使用margin属性，如图所示。如果您将空白-左作为右侧div的负值，那么右侧div将移动到徽标div下面/上面。