css如何让元素不随滚动条滚动?

在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。

fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。

固定定位的元素以相对浏览器窗口为基准进行定位的,无论怎样移动你的滑动条,它都会固定在相对于浏览器窗口的固定位置,另外要注意,它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top,bottom,left,right也是相对于浏览器窗口而言的。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			.logo {
				width: 540px;
				height: 258px;
				position: fixed;
				background: url(https://www.baidu.com/img/bdlogo.png) no-repeat;
				margin: auto;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			}
		</style>
	</head>

	<body>
		<div class="logo"> </div>
		111<br/> 111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
		<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
	</body>

</html>

效果图:

1.gif

从上面的示例看出:可以使用position: fixed来固定图片位置不变,让图片位置可以不随着文字的拖动而改变图片位置。

注:

在IE7以上版本及firefox、opera、safari里,都支持css属性"position:fixed",它的作用就是将元素相对于窗口固定位置。

但是在IE6下,并不支持position:fixed属性,这个时候我们需要对IE6进行hack处理。

Image placeholder
前端答疑
未设置
  50人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css怎么设置div不随滚动条移动?

css怎么设置div不随滚动条移动?把一个内容固定到某一个位置,相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位position通常有absolute绝对定位,relative相对定

jq设置css让元素不显示

jq设置css让元素不显示使用jQuery设置元素的css属性,需要使用.css()方法,具体操作如下:$("#id").css("display","none");//隐藏 $("#id").css

css如何设置元素不显示仅占位置?

css如何设置元素不显示仅占位置?隐藏页面元素可以使用visibility:hidden属性,它将元素设置为不可见,并且占据原来的位置,不能响应点击事件。不可见 .hide{ visibility:

css3实现元素不停旋转

css3实现元素不停旋转主要使用了@keyframes和animation,以及指定infinite,播放次数不限来实现。HTML代码如下: HTML中文网 CSS代码如下:(相关课程推荐:css视

css设置div滚动条内容不超过就不显示

css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示滚

css怎么隐藏滚动条样式?

css怎么隐藏滚动条样式?用到的属性有overflow:hidden,下面,我们用一个案例来说明实现的方法及步骤。1、新建一个html文件,在head中写入内部CSS代码:2、然后再body中添加一个

css如何让字体不加粗?

在CSS中可以使用font-weight:normal样式来让字体不加粗。font-weight属性设置文本的粗细,设置值为normal来定义标准的字符。font-weight属性用于设置显示元素的文

CSS如何让背景图片不重复?

CSS如何让背景图片不重复?css中设置完背景图后,不指定平铺属性,默认是横向纵向重复的,导致图片出现重复。让图片不重复可以设置background-repeat属性。css中background-r

css如何去掉html元素

css如何去掉html元素css无法将html元素完全的从页面中去除,但是可以通过一些方法让它们在视觉上隐藏掉。具体的做法是设置元素css属性display:none和visibility:hidde

jquery如何设置元素不可点击?

jquery如何设置元素不可点击?jquery设置表单元素不可点击可以使用attr()方法,给它们加上readonly、disabled属性。设置其他元素不可点击,可以使用css()方法,设置它们的p

jquer如何判断是否有滚动条?

利用jQueryscrollTop()来控制滚动条滚动,再判断滚动条是否有偏移。如果有,则存在滚动条,相反没有滚动就不存在。 $(function(){ $("body").scrollTop(10)

jquery判断是否出现滚动条?

jquery判断是否出现滚动条?一、判断可视区域是否超过实际高度,超过一定存在if($(window).height()=document.body.clientHeight){ alert("页面无

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css如何清除a标签的block属性

css如何清除a标签的block属性a标签默认是inline行内元素,不支持设置宽高等属性。为了让a标签支持宽高属性,我们可以设置a{display:block}将它变成块级元素同样的,清除a标签的b

css如何设置字体位置

css如何设置字体位置1、text-align设置字体的位置text-align语法:text-align:left|right|center|justifytext-align参数值与说明:left

css如何设置图片不变形

css如何设置图片不变形解决方法有两种:一、让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。//原尺寸300*200 //等比缩放2:1 img{ wid

css如何设置表格边框不重叠?

css如何设置表格边框不重叠?一、设置css属性border-collapse:collapse。table{ border-collapse:collapse; } tabletr{ border:

js如何引入css文件?

js如何引入css文件?1、使用document.write方式输出引入css的link标签在调用文件的顶部加入下例代码 document.write(''); (注:有时你引用的文件还可能需要引用其

css如何将一行平均分成几列?

css如何将一行平均分成几列?column-count属性规定元素应该被划分的列数。它的取值可以是number|autonumber:元素内容将被划分的最佳列数。auto:由其他属性决定列数,比如"c

css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

css如何设置文字描边效果?

想要使用CSS给文字添加描边效果,主要有两种方法:使用text-stroke属性或text-shadow属性。方法1:使用text-shadow属性text-shadow属性用于向文本添加字体边框或阴

css如何把div修饰成圆?

css如何把div修饰成圆?1、打开代码编辑器,新建一个html文件,写上基本的结构 Document 2、在body标签内输入:,这里的div就是用于画圆形的标签。(推荐学习:CSS视

HTML中行内元素与块级元素区别有什么?

HTML中行内元素与块级元素区别有什么?区别有:●行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的。●块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列。●行内元素不可

块级元素和行级元素

块级标签:divph1-h6ulol等,行内标签:aspan等行内块标签:imginputbutton等. ####行内块特点: 1.不独占一行 2.可以设置宽高

行内元素与块级元素

用途:页面布局 块级元素独占一行,行内元素在同一行。块级元素占用宽度100%,行内元素有内容决定。块级元素可以设置宽高,行内元素不行。 块级元素标签h1-h6pdiv行内元素标签:spanaemib