2012-07-21 115 views
4

的div元素我有一个网站在布局看起来是这样的:(下图)堆叠在彼此

enter image description here

在左侧面板上,我有这显示一个标志一个div。我还有另一个div,我想放在logo下面,所以这些必须叠放在一起。我试着摆弄z-索引,但并没有完全理解这些。 这怎么办?

+1

你试过(重新)定位的div? - 否则,看看... http://www.w3schools.com/Css/css_positioning.asp – lobner 2012-07-21 08:12:53

+0

尝试浮动:左; – alibenmessaoud 2012-07-21 08:12:55

回答

1

尝试也使用的位置是:绝对的;而不是相对于使用z-index时的两个元素。然后它可以在你的布局中产生一些扭曲,所以你可以把logo div放入另一个相对的div中,或者使用其他技术来修复它,但是它必须在使用绝对位置和z-index时工作。如果它仍然无法正常工作,请检查您的某些javascript是否无干扰,或者您的代码中是否有其他元素具有z-index,因此会导致问题。

如果使用绝对位置,不要忘记定义利润率左边距

+0

我通过使用'position:absolute'得到了正确的结果,但我想知道绝对定位的顶部:30px)在所有设备/浏览器上看起来都不错吗?这是做这件事的正确方法吗? – user1240679 2012-08-04 12:13:07

+0

使用明确:均;如果您有任何问题 – Derfder 2012-08-04 15:53:20

+0

或清除:left;在ie6等较旧的浏览器中应该没问题。或清楚:对;更多在这里:http://it.toolbox.com/blogs/css-asylum/the-ie6-absolute-positioning-bug-15285 – Derfder 2012-08-04 15:54:49

0

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

+0

徽标div和新div均位于宽度为220px的侧边栏面板中。所以,徽标和新的div不会排成一行。我仍然可以使用这个保证金留下的财产吗? – user1240679 2012-07-21 08:18:57

+0

您也许可以,但您可能还需要使用'margin-top'... – starbeamrainbowlabs 2012-07-21 10:40:37

+0

是的,您可能可以..你将不得不处理保证金财产 – 2012-07-21 10:43:29

2

如果z-index工作不适合你尝试嵌套标志<div>在包装<div>像这样

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

我不知道你想达到但尝试this,适应值,你的布局

+0

我更新了我的小提琴,那是你在找什么? – morgi 2012-07-21 08:35:36

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

谢谢你的回答。这看起来很漂亮,而且我也能够通过使用'position:absolute'来获得正确的结果,但我想知道所有设备/浏览器的绝对定位是否像顶部:30px)看起来不错?绝对定位也是正确的做法吗? – user1240679 2012-08-04 12:14:07

+0

随时“更新”我的jsFiddle并发布修改后的链接,供我评论。 – arttronics 2012-08-04 13:08:11