css定位z指数负边距

Question

css定位z指数负边距

我有以下html - 无论我做什么,我似乎无法让中间div出现在顶部顶部和顶部.它位于顶部上方,但我希望底部位于中间位置,底部实际位于顶部.有任何想法吗？下面的Jsfiddle链接也..提前感谢!

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

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/EWkMA/29/

Answer 1

med*_*iev 43

z-index在静态定位元素上没用.试试position:relative.如果负边距不适合您,请使用top或bottom负值.

Answer 2

小智 8

您需要指定position:

#connector{
    position:relative;
    height:200px;border:10px solid black;
    background:blue;
    margin-bottom: -100px;   
    z-index: 21;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，11 月前
查看次数：	15459 次
最近记录：	14 年，11 月前