CSS初学——关于窗口内容的定位以及浮动问题

突然想起有关于页面的菜单，有些网页的菜单是固定的，即使如何滑动界面都可以使得这个菜单栏或者某个内容栏固定在页面窗口的一个地方，如下：
CSS初学——关于窗口内容的定位以及浮动问题要实现的有：使得左右两边的灰色窗口可以固定，无论如何滑动中间红色的窗口，两个灰色窗口都不会改变位置，其中要使用到的就是position中的“fixed”——相对页面固定属性。
具体代码如下：
CSS：

body {
            background-color: bisque;
        }
        div#all {
            margin: auto;
            width: 1100px;
        }
        #one,#three {
            width: 20%;
            height: 300px;
            float: left;
        }
        #two {
            width: 60%;
            height: 1100px;
            background-color: brown;
            float: left;
        }
        #fixed {
            width: 220px;
            height: 300px;
            background-color: darkgray;
            position: fixed;
        }

body内的代码：

<body>
    <div id="all">
        <div id="one"></div>
            <div id="fixed"></div>
        <div id="two"></div>
        <div id="three">
            <div id="fixed"></div>
        </div>
        <!-- 通过嵌套的形式，先固定好一个div，然后在其内部再写入一个固定的div -->
    </div>
</body>

之所以要使用嵌套是发现，如果在CSS中同时对一个div定义position和float，那么这个div的浮动属性会被固定属性所掩盖，如果把CSS内的代码改成如下：
实现失败的CSS代码：

div#all {
            margin: auto;
            width: 1100px;
        }
        #one,#three {
            width: 20%;
            height: 300px;
            background-color: darkgray;
            float: left;
            position: fixed;
        }
        #two {
            width: 60%;
            height: 1100px;
            background-color: brown;
            float: left;
        }

那么，它的结果如下：
CSS初学——关于窗口内容的定位以及浮动问题
灰色框左浮动后会遮盖住红色框，虽然也是相对于窗口固定了，但是这样会导致红框内部的内容无法完全显示。

CSS初学——关于窗口内容的定位以及浮动问题

相关推荐