纯CSS实现网页内容悬浮

近来,有很多朋友和客户问到网页内容悬浮的问题,有时是QQ客服(如本站左侧),有时是广告图片;下面我总结两种最常用的方式实现网页内容悬浮(可直接复制使用):

第一种、使用expression(推荐)

.qq {
	top: 200px;
	position: fixed;
	left: 0px;
	_position: absolute;
	_top:expression(eval(document.documentElement.scrollTop + 200));
	z-index: 10000;
}

使用方法:top:200px,意思是离顶部200px,可修改;left:0px,意思是离左边0px,可修改像素值,如果是挨着右边,改为 right:0px;

第二种:html和body(不推荐,容易和别的地方冲突)

.qq{
top:200px;
position:fixed;
left:0px;
z-index:10000;
_position:absolute;
}
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
overflow:auto;
}

《纯CSS实现网页内容悬浮》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注