css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固定在一个位置任何时候都在一个位置

作者&投稿:严辉 (若有异议请与网页底部的电邮联系)
固定的DIV,当滚动条到一定位置时一个DIV就固定了怎么做~

只说方法,代码细节自己调。
.topfix{position:fixed;top:0;}/*固定悬浮样式*/var oTop = $("#div").offset().top;//默认上边距离$(document.body).scroll(function(e){//body滚动事件 if(document.body.scrollTop > oTop ){ $("#div").addClass("topfix"); }else{ $("#div").removeClass("topfix"); }});

position:fixed; top:0px; left:0px; right:0px;height: 40px;
position:fixed;是指定位相对于浏览器窗口, top:0px; left:0px; right:0px,
这样的话,DIV就会固定在页面顶部,宽度等于浏览器窗口的宽度,高度自定义。

1、需要使用固定定位才能做到这样的效果。具体方法是首先打开html编辑器,首先设置一个容器div,然后设置一个用来演示效果的div,分别设置class属性名为container和fixed:

2、在style标签中设置样式,设置container的position属性为相对定位,并且给它一个很高的高度,然后给fixed设置高度和宽度,以及颜色等属性,这里的重点是设置position属性为fixed,以及设置top和left属性控制div的位置,设置完成后保存文件:

3、打开浏览器,可以看到div并且可以观察到进度条是最上面的:

4、接着将进度条拉倒最下面,可以发现div还是在原来的位置保持不变。以上就是用fixed属性设置div固定位置的方法:



<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>


给div加个position:fixed;top:0px; left:0px;可让该div固定在网页的顶部左侧,且不会随网页而滚动。如若想固定在其他位置,只需要改动top,left,right,bottom属性值即可。

用绝对定位

//绝对定位和相对定位
position: absolute;
z-index: 100;
left: 100px;
top: 100px;
--------------------
position: relative;父元素
position: absolute;子元素

用CSS的position:fixed; 绝对定位
<div style="width:50px; height:50px; background:blue;top:80px; position:fixed; ">不动</div>


东明县15888485198: css div 固定一个div 使这个div不随着网页的滚而滚动 就是把这个div固定在一个位置任何时候都在一个位置
不柄按摩: 用CSS的position:fixed; 绝对定位 &lt;div style="width:50px; height:50px; background:blue;top:80px; position:fixed; "&gt;不动&lt;/div&gt;

东明县15888485198: html如何使用css的定位属性来设置使一个div始终靠在另外一个div的左边 -
不柄按摩: 在两个div中加上float:left;就实现了相对定位

东明县15888485198: css+div 在不同分辨率下固定在页面的同一个位置 如何实现? -
不柄按摩: 如果你的页面都是包在一个div下的话,那给这个div定义一个样式就可以了.div {width:你页面的宽度; margin:0 auto; ...} 注意几点:1、页面必须有DTD文档类型申明;2、外围div要设宽度;3、再加上margin:0 auto就可以了.

东明县15888485198: 怎样用css将div固定在屏幕某个比例(比如说屏幕靠右1/3)处? -
不柄按摩: 这个div必须body的子元素,然后用width:30%;position:absolute;就可以了

东明县15888485198: css div的大小可不可以固定 -
不柄按摩: 用css可以固定div的大小,div相当于一个盒子,当边框内的宽和高分别由width,height指定时,另加的padding内边距默认模式下会撑大盒子,所以有一个切换模式的样式语句:box-sizing,取值为border-box时,div大小以边框为准,padding不会撑大div.

东明县15888485198: div嵌套一个div,设置css,使得内部div紧贴外部div边框 怎么写css -
不柄按摩: 汗给里面那个div的css加一个浮动float:right

东明县15888485198: html中怎么用CSS固定一个div模块不动 -
不柄按摩: 你的意思是一个模块在屏幕上固定不懂吧 position:fixed;right:0;bottom:0;想QQ弹窗一样,在右下角,哈哈

东明县15888485198: css怎样使div悬浮在固定位置博客 -
不柄按摩: 固定在右侧,垂直居中 div{ position:absolute; top:50%; right:0; }

东明县15888485198: 如何让div固定在某个div某处且随滑块滑动而改变 -
不柄按摩: 1.固定在页面的某个位置div{width:100px;height:100px;background-color:#F00;position:absolute;top:50px;left:0;}2.固定在窗口的某个位置div{width:100px;height:100px;background-color:#F00;position:fixed;bottom:0;left:0;}

东明县15888485198: CSS 中DIV固定让图片显示在一行! -
不柄按摩: 让图片左浮动 float:left比如想让<div class="list"></div> 里的图片显示在一行样式就写 .list img{float:left}

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网