固定DIV不随滚动条滚动

最新推荐文章于 2024-01-31 10:31:35 发布
最新推荐文章于 2024-01-31 10:31:35 发布
阅读量207 收藏
点赞数
文章标签： 固定DIV不随滚动条滚动 position:fixed


【webQD】☆★之固定DIV不随滚动条滚动

 

    在项目开发中，有的页面的某些按钮，我们是不想让他跟着滚动条滚动的，比如，添加页面，有很长的内容添加，在往下滚动添加的过程中，我们始终想看到保存按钮。OK！

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
   < title > New Document </ title >
   < meta  name = "Generator"  content = "EditPlus" >
   < meta  name = "Author"  content = "" >
   < meta  name = "Keywords"  content = "" >
   < meta  name = "Description"  content = "" >
     < style  type = "text/css" >
     body{
      margin:0px;
      padding:0px;
     }
     #nav{position:fixed; top:0;left:0; width:100%; background:#F00;}
     </ style >
</ head >
< body >
< div >
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < br />xxxxxxxxx< br />
     < div  id = "nav" >
         效果
     </ div >
</ div >
</ body >
</ html >

 

        我们看一下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位！ok！

    position:absolute，absolute是对网页边框而言的。

     如果，你用absolute加上js代码也可以实现以上效果，但是你会发现随着滚动条滚动时，那个层会晃来晃去，所以采用这种position:fixed，是可以使层固定不动的一种做法！

    我特意查了一下手册，貌似在IE6一下版本不行！

    ok？

古越剑箫
关注
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
08-14
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
div固定位置，不随滚动条滚动
飓风王洛林的专栏
02-06 527
Html代码 html> head> title>div固定位置，不随滚动条滚动title> style type="text/css"> html,body { overflow:hidden; margin:0px; width:100%; height:100%; } .virtual_body { width:100%; height:100%; over
div不随滚动条的移动而改变位置
01-12
div固定在屏幕的一个位置，不随滚动条的拖动而改变位置
在滚动div上的div不随滚动条滚动
longxzq的专栏
12-01 370
在滚动div上的div不随滚动条滚动原因是浮动层样式 z-index 设置不准确，滚动div上的div的z-index 得大于滚动div的z-index
css将div层固定显示在页面底部不随滚动条滚动
12-13
总结来说，要创建一个不随滚动条滚动而始终保持在页面底部的div元素，我们使用了CSS的position属性，并将其值设为fixed。这样我们就可以通过调整right和bottom属性来控制元素距离窗口边缘的位置，同时设置width和...
固定Table第一行或某几行不随滚动条滚动而滚动
01-19
样式： 复制代码代码如下: .fixedHead { position: relative; top:[removed]this.offsetParent.scrollTop-2);...复制代码代码如下: <div> ”con_tbl”> ”fixedHead”> 标题不动</th> </tr> ”code”> <t
DIV随滚动条滚动而滚动的实现代码【推荐】
11-23
在网页设计中，有时我们...本文将详细讲解如何利用jQuery实现`DIV`随滚动条滚动的效果。 首先，我们需要引入jQuery库。在HTML文件中，我们可以在`<head>`部分添加如下代码来引用jQuery 1.7.2的最小化版本： ```html ...
DIV不随滚动条而滚动
e_yohn的专栏
10-11 908
.top {top:0px; height:28px; width:100%; position:fixed; background:#EBEBEB; border-bottom:1px solid #000000; text-align:center;} title
div浮动不随滚动条滚动
zhoupuyue的专栏
02-16 332
&lt;div style="position:fixed;top:200px;right:0px;"&gt;&lt;/div&gt;  
DIV固定不动，不随滚动条滚动且不闪动
weixin_33785108的博客
03-11 225
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&...
div标签固定位置不随滚动条或页面滚动
小熊猫
06-18 969
上代码 <form class="layui-form" action=""> <div class="layui-inline" style="position:fixed; left:2px; top:2px; z-index:99;"> <a class="layui-btn setTemp" lay-filter="Search" style="width: 100px;" lay-submit="">分配模板</
固定div位置，不随滚动条上下动
AinUser的博客
12-30 7870
1、position div中的style属性中的一个关键字，表明了该div所在的位置以及位置本身的属性。 position有四个值可选：static，absolute，fixed，relative。 若要使得div相对于浏览器窗口固定，即不随滚动条的变化而上下移动，可以用fixed属性。最近比较忙，抽不出时间来具体的写详细用法，具体的用法见：http://blog.csdn.n
【jQuery笔记Part2】01-jQuery显示&隐藏&切换动画&侧边广告案例
萌宅鹿的技术小屋
08-25 424
01-jQuery动画jQuery动画动画分类HTML DOM position 属性定义和用法显示 show(毫秒, 完成回调函数)隐藏 hide(毫秒, 完成回调函数)切换 toggle(毫秒, 完成回调函数)案例：两侧浮动广告显示或者隐藏控制 jQuery动画 通过 jQuery 动画方法，能够很轻松地为网页添加非常精彩的视觉效果 给用户一种全新体验。 动画分类 显示、隐藏 滑动、卷动 淡...
如何让div居于屏幕底部不随屏幕滚动而滚动
最新发布
LJXZZZZZ的博客
01-31 259
该元素的父元素必须是屏幕即根元素，使用绝对定位的fixed属性，将bottom的属性值设置为0，z-index的值设置的尽量高，即可使元素处于屏幕最底部且不随屏幕滚动而滚动。
html固定左侧不滑动,css fixed 定位 让局部UI固定 不跟随滚动条移动
weixin_39622760的博客
05-30 1329
文章目录在国庆长假马上结束时,分享一篇关于 css定位的博文,收回你的玩心,开始工作了.css 中的定位是一个重点,也是难点,之前有一篇专门探讨 css中position定位的问题达到的效果 如果你够细心的话,你会发现我的博客列表也和博文详情页右侧侧边栏有变化之前侧边栏是跟随滚动条移动的,当右侧内容不足时,会看到一片空白,体验不好所以我希望,当滚到到右侧无内容填补时,指点的模块能做一个固定定位,...
固定div位置,不随滚动条上下动
05-01
如何固定div位置，不随滚动条上下动呢？首先，我们需要了解一个css属性——position。 1. position属性 这个属性是用来设置元素的定位方式，它可以设置为static、relative、absolute、fixed、sticky五种值。在这里...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值