本文介绍了css定位z-索引负边距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下html - 无论我怎么样,我似乎不能得到中间的div出现在顶部和顶部的底部。它坐在上面的顶部,但在那里我会期待底部坐在中间,底部实际上坐在上面。有任何想法吗 ?下面的Jsfiddle链接...预先感谢!
I have the following html - no matter what i do I cant seem to get the middle div to appear on top of the top and also on top of the bottom. It sits fine above the top but where i'd be expecting the bottom to sit below the middle the bottom actually sits on top. Any ideas ? Jsfiddle link below also .. thanks in advance !
<body> <div> <div id="tdiv" >Top Div</div> <div id="connector">Middle Didv</div> <div id="bdiv">Bottom Div </div> </div> </body> #tdiv{ height:200px; border:10px dotted black ; margin-bottom: -100px; background:red; } #connector{ height:200px;border:10px solid black; background:blue; margin-bottom: -100px; z-index: 21; } #bdiv{ border:21px dashed black; height:200px; z-index: 1; background:green; }jsfiddle/EWkMA/29/
推荐答案z-index 在静态定位元素上是无用的。尝试 position:relative 。如果负边距无法解决,请使用 top 或底部和负值。
z-index is useless on a static positioned element. try position:relative. if negative margins don't work out for you, use top or bottom and negative values.
更多推荐
css定位z
发布评论