写一个浮框固定在页面，单击可以消失

最新推荐文章于 2023-09-21 09:08:51 发布

原创最新推荐文章于 2023-09-21 09:08:51 发布 · 651 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发 #javascript #css

web 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个简单的CSS固定定位实现案例，使用HTML和CSS创建了一个可关闭的固定定位元素，并通过jQuery实现了点击关闭的功能。该案例适用于初学者了解如何在网页中使用固定定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前以为很麻烦，从来没有自己写过，今天写了个，原来用浮动就可以完成。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS固定定位</title>
<style type="text/css">
{
padding:0;
margin:0;
}
#fixedLayer{
	height:100px;
width:100px;
background: #808080;
border:1px solid #828282;
position:fixed;
right:10px;
bottom:50px;
}
#close{
	line-height::0px;
	clear::both;
	position: absolute;
  right:0px;
  top:0px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
#fixedLayer {
position:absolute;
}
</style>
<![endif]-->
<script type="text/javascript" src="jquery.js" >
</script>

</head>
<body>
<div id="fixedLayer"><a id="close">x</a></div>
<script>
$(function(){
	$("#close").click(function(){
		$("#fixedLayer").hide();
		}) 
		
	})
</script>

<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
</body>
</html>