问题与CSS，在位置上：绝对

我不知道如果父母有一个位置：绝对，我应该宣布什么样的位置。问题与CSS，在位置上：绝对

下面的代码，

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

谢谢！

来源

2010-08-05 Ryan

那么，你现在要移动是相对的div的？你不能更改代码？ – 2010-08-05 03:23:50

目前还没有位置，我说的是3个div。这是我的问题。我应该使用3个div的位置？ – Ryan 2010-08-05 03:36:52

如果您需要更改<div>的显示方式不改变代码，位置：绝对是最好的选择：

.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中订购它，它会让您的生活更轻松。如果你给#new_map的relative要排列的绝对这一位置将使得这些儿童的位置相对于父#new_map即你的原点坐标将是#new_map左上角孩子的位置，然后

来源

2010-08-05 03:46:51 Pat

。然后，您可以根据#new_map的位置更改子项的堆叠顺序（z-index）或定位（顶部，左侧，右侧，底部）。

来源

2010-08-05 05:30:18 prodigitalson

这就是你的意思，我觉得>

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

来源

2010-08-06 13:36:02 no1cobla

问题与CSS，在位置上：绝对

回答

相关问题