的div元素我有一个网站在布局看起来是这样的:(下图)堆叠在彼此
在左侧面板上,我有这显示一个标志一个div。我还有另一个div,我想放在logo下面,所以这些必须叠放在一起。我试着摆弄z-索引,但并没有完全理解这些。 这怎么办?
的div元素我有一个网站在布局看起来是这样的:(下图)堆叠在彼此
在左侧面板上,我有这显示一个标志一个div。我还有另一个div,我想放在logo下面,所以这些必须叠放在一起。我试着摆弄z-索引,但并没有完全理解这些。 这怎么办?
尝试也使用的位置是:绝对的;而不是相对于使用z-index时的两个元素。然后它可以在你的布局中产生一些扭曲,所以你可以把logo div放入另一个相对的div中,或者使用其他技术来修复它,但是它必须在使用绝对位置和z-index时工作。如果它仍然无法正常工作,请检查您的某些javascript是否无干扰,或者您的代码中是否有其他元素具有z-index,因此会导致问题。
如果使用绝对位置,不要忘记定义利润率左和边距。
我通过使用'position:absolute'得到了正确的结果,但我想知道绝对定位的顶部:30px)在所有设备/浏览器上看起来都不错吗?这是做这件事的正确方法吗? – user1240679 2012-08-04 12:13:07
使用明确:均;如果您有任何问题 – Derfder 2012-08-04 15:53:20
或清除:left;在ie6等较旧的浏览器中应该没问题。或清楚:对;更多在这里:http://it.toolbox.com/blogs/css-asylum/the-ie6-absolute-positioning-bug-15285 – Derfder 2012-08-04 15:54:49
尝试使用margin
属性,如图所示。如果您将margin-left
作为右侧div的负值,那么右侧div会移动到徽标div的下方/上方。
徽标div和新div均位于宽度为220px的侧边栏面板中。所以,徽标和新的div不会排成一行。我仍然可以使用这个保证金留下的财产吗? – user1240679 2012-07-21 08:18:57
您也许可以,但您可能还需要使用'margin-top'... – starbeamrainbowlabs 2012-07-21 10:40:37
是的,您可能可以..你将不得不处理保证金财产 – 2012-07-21 10:43:29
如果z-index
工作不适合你尝试嵌套标志<div>
在包装<div>
像这样
<div> <!--div container to hold the logo div-->
<div><!--Logo div--></div>
</div>
参考什么: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%;
}
谢谢你的回答。这看起来很漂亮,而且我也能够通过使用'position:absolute'来获得正确的结果,但我想知道所有设备/浏览器的绝对定位是否像顶部:30px)看起来不错?绝对定位也是正确的做法吗? – user1240679 2012-08-04 12:14:07
随时“更新”我的jsFiddle并发布修改后的链接,供我评论。 – arttronics 2012-08-04 13:08:11
你试过(重新)定位的div? - 否则,看看... http://www.w3schools.com/Css/css_positioning.asp – lobner 2012-07-21 08:12:53
尝试浮动:左; – alibenmessaoud 2012-07-21 08:12:55