CSS 问题，位置：绝对

Question

我不知道如果父母有一个立场：绝对，我应该宣布什么样的立场。

这是代码，

<div id="new_map">
                    <div id="map_nbc_pop">
                        <div class="nm_bubbletop1"></div>
                        <div id="nm_bubblebg">                          
                            <ul class="nm_left">
                            <li><a href="#">Chetwynd</a></li>
                                <li><a href="#">Fort St James</a></li>
                                <li><a href="#">Fort St John</a></li>
                            </ul>
                            <ul class="nm_right">
                            <li><a href="#">McBride</a></li>
                                <li><a href="#">Prince George</a></li>
                                <li><a href="#">Prince Rupert</a></li>
                            </ul>
                        </div>
                        <div class="nm_bubblebelow1"></div>
                    </div>
</div>

这是示例 CSS，我只是删除了其他内容以供查看...

#new_map { position: static }
#map_nbc_pop { position: absolute }

对我来说问题在于 .nm_bubbletop1、#nm_bubblebg、.nm_bubblebelow1 我该使用什么位置？因为它们在浏览器上没有正确分层。

<div class="nm_bubblebelow1"></div>
<div class="nm_bubbletop1"></div>
<div id="nm_bubblebg"></div>

我想要的是这个，

<div class="nm_bubbletop1"></div>
<div id="nm_bubblebg"></div>
<div class="nm_bubblebelow1"></div>

谢谢！

Answer 1

如果您需要在不更改代码的情况下更改

的显示方式，position:absolute 是您的最佳选择：

.nm_bubbletop1, #nm_bubblebg, .nm_bubblebelow1 [
   position: absolute;
   left: 0;
}

.nm_bubbletop1 {
   top: 0;     
}

#nm_bubblebg {
   top: 100px; /* this is .nm_bubbletop1's height */     
}

.nm_bubblebelow1 {
   top: 200px;  /* this is .nm_bubbletop1's height + #nm_bubblebg's  height */    
}

话虽这么说，但它很 hacky。如果您可以在 HTML 中按照您想要的方式对它们进行排序，那么您的生活将会更轻松。

Answer 2

如果您给 #new_map 一个 relative 位置，然后给您想要安排绝对位置的子项，这将使这些子项的位置相对于父项 #new_map 即坐标原点将是#new_map 的左上角。然后，您可以根据 #new_map 的位置更改子级的堆叠顺序 (z-index) 或位置（上、左、右、下）。

Answer 3

我想这就是你的意思>

<div id="new_map">
                <div id="map_nbc_pop">
                    <div class="nm_bubbletop1"></div> 
                    <div id="nm_bubblebg">
                        <ul class="nm_left" >
                        <li><a href="#">Chetwynd</a></li>
                            <li><a href="#">Fort St James</a></li>
                            <li><a href="#">Fort St John</a></li>
                        </ul>
                        <ul class="nm_right">
                        <li><a href="#">McBride</a></li>
                            <li><a href="#">Prince George</a></li>
                            <li><a href="#">Prince Rupert</a></li>
                        </ul>
                    </div>
                    <div class="nm_bubblebelow1"></div>
                </div>

还有 css：

#new_map { position: static }
#map_nbc_pop { position: absolute }
.nm_bubbletop1, .nm_bubblebelow1 {  position:absolute; height:15px; background-color:#ccc; width:100%; }
.nm_bubbletop1 { top:0px; }
.nm_bubblebelow1 { bottom:0px; }
#nm_bubblebg { margin:15px 0px; }

这使得菜单变得灵活，并且顶部和底部始终就位。中间的边距使其无缝连接。

小提琴：http://jsfiddle.net/fmDhn/1/