Float覆蓋了與CSS

-1

浮動看看我的例子，來證明我有這個問題的一種元素：Float覆蓋了與CSS

#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

如何能不能做到？

來源

2013-03-10 Karem

那麼你沒有發佈的部分是它的下降。該元素需要被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; 
}

來源

2013-03-10 23:57:50 prodigitalson

隨着'位置：absolute'，我相信你可以刪除'浮動：left'從#mymenu，因爲它似乎並沒有反正做任何事情。 – DACrosby 2013-03-11 00:03:57