Web开发基础-CSS-20-优快云博客

本文链接：https://blog.youkuaiyun.com/Coder_Boy_/article/details/80951144

本文通过一个淘宝页面实例展示了如何使用CSS中的固定定位属性(position: fixed)来实现元素始终固定在浏览器窗口的特定位置，例如左下角。此方法对于创建悬浮按钮等常驻元素非常实用。

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

CSS中元素位置的定位处理——固定定位：

概念解释：

本案例通过一个淘宝页面演示固定定位：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情页</title>
		<style type="text/css">
			div {
				width:30px;
				background-color: #ccc;
				text-align: center;
				line-height:30px;
				position: fixed;
				bottom: 10px;
				right:5px;
			}
		
		</style>
	</head>
	<body>
		<div><a href="#">TOP</a></div>
		<h1>iPhone8plus</h1>
		<p>这是一款4G手机</p>
		<p>配置和8差不多</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>......</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>......</p>
		<p>......</p>
		<p>......</p>
		<p>......</p>
		
		
	</body>
</html>

页面最终显示效果：滚动滚动条 TOP始终固定在浏览器左下角