如题所述
1、需要使用固定定位才能做到这样的效果。具体方法是首先打开html编辑器,首先设置一个容器div,然后设置一个用来演示效果的div,分别设置class属性名为container和fixed:
2、在style标签中设置样式,设置container的position属性为相对定位,并且给它一个很高的高度,然后给fixed设置高度和宽度,以及颜色等属性,这里的重点是设置position属性为fixed,以及设置top和left属性控制div的位置,设置完成后保存文件:
3、打开浏览器,可以看到div并且可以观察到进度条是最上面的:
4、接着将进度条拉倒最下面,可以发现div还是在原来的位置保持不变。以上就是用fixed属性设置div固定位置的方法:
温馨提示:答案为网友推荐,仅供参考
第1个回答 2017-06-28
<style>
.a{
width:100px;
height:40px;
background-color:#0CF;
position:fixed;
top:100px;
}
.b{
width:400px;
height:3000px;
background-color:#CC0;
}
</style>
<body>
<div class="a">菜单</div>
<div class="b">子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单</div>
.a{
width:100px;
height:40px;
background-color:#0CF;
position:fixed;
top:100px;
}
.b{
width:400px;
height:3000px;
background-color:#CC0;
}
</style>
<body>
<div class="a">菜单</div>
<div class="b">子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单<br>子菜单</div>
第2个回答 2012-09-11
给div加个position:fixed;top:0px; left:0px;可让该div固定在网页的顶部左侧,且不会随网页而滚动。如若想固定在其他位置,只需要改动top,left,right,bottom属性值即可。
第3个回答 2012-09-22
用绝对定位
//绝对定位和相对定位
position: absolute;
z-index: 100;
left: 100px;
top: 100px;
--------------------
position: relative;父元素
position: absolute;子元素
//绝对定位和相对定位
position: absolute;
z-index: 100;
left: 100px;
top: 100px;
--------------------
position: relative;父元素
position: absolute;子元素
第4个回答 2012-09-11
用CSS的position:fixed; 绝对定位
<div style="width:50px; height:50px; background:blue;top:80px; position:fixed; ">不动</div>本回答被网友采纳
<div style="width:50px; height:50px; background:blue;top:80px; position:fixed; ">不动</div>本回答被网友采纳