您的位置：首页 > Web前端 > CSS

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

2019-01-30 15:50 351 查看

突然想起有关于页面的菜单，有些网页的菜单是固定的，即使如何滑动界面都可以使得这个菜单栏或者某个内容栏固定在页面窗口的一个地方，如下：
要实现的有：使得左右两边的灰色窗口可以固定，无论如何滑动中间红色的窗口，两个灰色窗口都不会改变位置，其中要使用到的就是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;
}

那么，它的结果如下：

灰色框左浮动后会遮盖住红色框，虽然也是相对于窗口固定了，但是这样会导致红框内部的内容无法完全显示。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航