CSS基础之固定定位

最新推荐文章于 2022-08-15 19:27:50 发布

原创最新推荐文章于 2022-08-15 19:27:50 发布 · 628 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #标签

CSS基础专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS中的固定定位(position:fixed;)及其使用方法。固定定位可以让元素保持在浏览器可视区域的固定位置，即使页面滚动也不会发生变化。文章通过示例代码演示了如何设置元素的位置，并解释了固定定位的一些特性，如脱离文档流、变为块级元素等。

固定定位
1、什么是固定定位
将元素固定在网页的可视化的某个位置处，不会随着滚动条而发生位置的改变
2、属性 & 值
position:fixed;
通过偏移属性实现位置的调整
top/right/bottom/left
3、注意
1、固定定位元素会脱离文档流
2、固定定位元素会变成块级元素

3、固定定位元素永远都是相对于body实现位置的初始化

效果如下图所示：

<!doctype html>
<html>
	<head>
		<title>Insert your title</title>
		<meta charset="utf-8">
		<style>
			#menu{
				width:30px;
				height:150px;
				background-color:red;
				position:fixed;
				right:0px;
				top:300px;
			}
		</style>
	</head>
	<body>
		<div id="menu"></div>
		<div style="height:5000px;"></div>
	</body>
</html>