Float覆盖了与CSS

Question

浮动看看我的例子，来证明我有这个问题的一种元素：

http://jsfiddle.net/zWkse/

#mymenu { 
    float: left; 
    z-index: 59; 
    width: 60px; 
    background: #000; 
    color: #FFF; 
} 

#myleftcontent { 
    width:100px; 
    background-color:#fff; 
    padding:7px; 
    border: 1px solid #d3d3d3; 
    float:left; 
    padding-bottom: 7px; 
    margin-bottom:20px; 
} 

#myrightcontent { 
    float:right; 
    width: 100px; 
} 

在我的网页，还有主要内容的左侧和一些右边的注释（div元素）

它们都是float: left或right。

现在我有一个下拉菜单，当您点击顶部菜单中的锚点链接时，该下拉菜单会向下滚动。 这个菜单在这个例子中是“mymenu”。

该菜单也是一个float: left，但我希望它漂浮在现有的元素。

从而使#mymenu是浮在#myleftcontent

如何能不能做到？

Answer 1

那么你没有发布的部分是它的下降。该元素需要被positionend使得#mymenu可定位绝对取I OUT流的z索引的，并允许有其效果：http://jsfiddle.net/4hGnL/

<div id="menu-container"> 
    <div id="mymenu"> 
     MY MENU<br /> 
     MY MENU 
    </div> 
</div> 
<div id="myleftcontent"> 
    i gentager successen og giver dig nu chancen for at få én times afslappende aroma therapy massage hos Prani Wellness, der fjerner dine spændinger og får dig i en rus af velvære! 
Thailandsk aroma therapy massagei gentager successen og giver dig nu chancen for at få én times afslappende aroma therapy massage hos Prani Wellness, der fjerner dine spændinger og får dig i en rus af velvære! 
Thailandsk aroma therapy massage 
</div> 
<div id="myrightcontent"> 
    i gentager successen og giver dig nu chancen for at få én times afslappende aroma therapy massage hos Prani Wellness, der fjerner dine spændinger og får dig i en rus af velvære! 
Thailandsk aroma therapy massagei gentager successen og giver dig nu chancen for at få én times afslappende aroma therapy massage hos Prani Wellness, der fjerner dine spændinger og får dig i en rus af velvære! 
Thailandsk aroma therapy massage 
</div> 

用CSS：

#menu-container { 
    position: relative; 
} 
#mymenu { 
    float: left; 
    z-index: 59; 
    width: 60px; 
    background: #000; 
    color: #FFF; 
    position: absolute; 
} 
#myleftcontent { 
    width:100px; 
    background-color:#fff; 
    padding:7px; 
    border: 1px solid #d3d3d3; 
    float:left; 
    padding-bottom: 7px; 
    margin-bottom:20px; 
} 
#myrightcontent { 
    float:right; 
    width: 100px; 
} 

Answer 2

添加clear: left;至#myleftcontent将使其低于#mymenu。

编辑：在上面的“over”的意思上回答。对不起，如果这不是你的意思！

Answer 3

你想要的菜单是不是浮动，但实际上有一个绝对的位置。这会将菜单移出文档流程。

position:absolute; 
z-index:1; 

Z-index确定元素将坐落在的“图层”。您可以从技术上假定默认情况下所有静态和相对元素都在第0层上。

请记住，这将需要一些计划，当涉及到您的HTML结构。绝对元素将相对于其容器定位。因此，如果您将它放在相对位置的div中，则顶部和左侧的0点位于该容器的边缘。否则，它将继续上升直到它与窗口绝对相关。

我与这个新的风格变化http://jsfiddle.net/zWkse/4/

Answer 4

你确定你想要的菜单浮动更新你的小提琴？我认为你是在绝对定位的正确轨道上，但它做为myleft内容div的子，并给它适当的：

left：0; top：0;

类型参数（或带有一些填充）。并且（如上所述），您希望此菜单具有更高的Z-index。

当然，myleftcontent不必绝对定位。

参见： http://www.w3schools.com/css/css_positioning.asp