具有固定位置的 DIV 以及浮动 DIV 不起作用答案

【问题标题】：DIV with Fixed Position along with Floating DIVs not working具有固定位置的 DIV 以及浮动 DIV 不起作用
【发布时间】：2013-12-10 14:41:13
【问题描述】：

请看这个 JsFiddle。 JSFiddle

<div class="main" >
    <div class="menufixedleft">
        Fixed Menu Should not Scroll
    </div>

    <div class="content">
        Main Content
    </div>

      <div class="rightsidebar">
          Right Side Bar
    </div>  
</div>

我正在尝试将左侧的菜单 div 固定，将内容放在中心，将侧边栏放在右侧。当我有中心和右侧栏时，它不工作，向左浮动。中心 div 覆盖在左侧的固定 div 上。

我唯一的选择是将 2 个 div（中心和右侧边栏）浮动到右侧吗？

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

根据您希望它的外观给main 或padding-left:100px; 或margin-left:100px 来为固定元素腾出空间（100px 来自固定元素的宽度）

Updated jsFiddle

【讨论】：

谢谢！从来没有想过在这种情况下填充！
完全没问题！ (:

【解决方案2】：

查看这个 JSFiddle：http://jsfiddle.net/J2tt6/1/

这是 CSS 代码：

body {
    padding: 0;
    margin: 0;
}

.main{
    height:500px;
    width:550px;
    background:pink;
    position:relative;
}

.menufixedleft{
    height:200px;
    width:100px;
    position:fixed;
    left:0;
    top:20px;
    background:green;

}

.content{
    height:400px;
    width:200px;
    background:blue;
    position: absolute; /* should not float, as fixed elements are above everything else. */
    left: 100px;
}

.rightsidebar{
   height:200px;
    width:100px;
    background:red;
   position: absolute; /* once again, don't float. */
    left: 300px;

}

【讨论】：

【解决方案3】：

当您将position: fixed 设置为左侧导航时，它会从布局中移除。要保留它，您需要将菜单包含在另一个元素中，该元素保留在布局中。

HTML：

<div class="main">

    <div class="menu">
        <div class="affix">
            Fixed Menu Should not Scroll
        </div>    
    </div>    

    <div class="content">
        Main Content
    </div>

    <div class="rightsidebar">
        Right Side Bar
    </div>

</div>

CSS：

.menu {
    float: left;
    min-height: 1px;
    width: 100px;
}

.affix {
    height: 200px;
    width: 100px;
    position: fixed;
    left: 0;
    top: 20px;
    background: green;
}

JS Fiddle

【讨论】：

修复了 JS Fiddle 链接