-1

查看我的示例，以演示我遇到的问题：

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

如何做呢？

4

4 回答 4

1

好吧，您尚未发布的 y 部分就是它的落下点。该元素需要定位，以便#mymenu可以绝对定位，使 i 脱离流动并允许 z-index 发挥作用：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-10T23:57:50.110 回答
1

您希望菜单做的不是浮动，而是实际上具有绝对位置。这会将菜单移出文档流。

position:absolute;
z-index:1;

Z-index 确定元素所在的“层”。从技术上讲，您可以假设所有静态和相关元素默认位于第 0 层。

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

我已经用这种新的风格改变更新了你的小提琴http://jsfiddle.net/zWkse/4/

于 2013-03-11T00:01:20.260 回答
0

添加clear: left;to#myleftcontent会将其移至下方#mymenu。

编辑：回答假设“超过”意味着上述。对不起，如果这不是你的意思！

于 2013-03-10T23:58:51.680 回答
0

您确定要浮动菜单吗？我认为您在绝对定位的正确轨道上，但作为 myleftcontent div 的子项并给予适当的：

左：0；顶部：0；

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

当然，myleftcontent 不必是绝对定位的。

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

于 2013-06-16T00:40:26.713 回答