HTML之固定定位

最新推荐文章于 2025-06-07 20:47:06 发布

原创最新推荐文章于 2025-06-07 20:47:06 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#固定定位HTML代码定位不动

HTML 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨HTML中的固定定位技术，讲解如何实现元素在页面上始终保持固定位置的方法，无论滚动条如何移动。通过实例代码解析，帮助读者掌握固定定位的使用技巧及其在网页设计中的重要性。

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

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	p{
	line-height: 50px;
	}
	#dh{
	border: 1px solid #000000;
	width: 100%;
	height: 50px;
	background-color: #FFFFFF;

	position: fixed;/固定定位/
	top: 0px;

	}

	#dh2{
	border: 1px solid #000000;
	background-color: #FFFFFF;
	width: 100px;
	height: 300px;

	position: fixed;
	left: 300px;
	top: 300px;
	}

	a{
	display: block;
	margin: 20px;
	}
	</style>
	</head>
	<body>

	<div id="dh2">
	<a href="#nz">女装</a>
	<a href="#man">男装</a>
	<a href="#dq">电器</a>
	<a href="">返回顶部</a>
	</div>
	<font color="red">这里是顶部</font>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<a name="nz"></a>
	<font color="red">这里是女装</font>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<a name="man"></a>
	<font color="red">这里是男装</font>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<p>这是文本内容</p>
	<a name="dq"></a>
	<font color="red">这里是电器</font>

	</body>
	</html>