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

如果您需要更改<div>的显示方式而不更改代码，则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 */    
}

话虽如此，这很黑。无论如何，你可以按照自己想要的方式在HTML中订购它们，它会让你的生活更轻松。

Answer 2

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

Answer 3

这就是我的意思＆gt;

<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/

CSS问题，位置：绝对

3 个答案: