7、CSS定位的说明和应用

最新推荐文章于 2024-07-19 15:20:42 发布

CodeCode!

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量94

点赞数

分类专栏： CSS 文章标签：定位 html css css3

本文链接：https://blog.csdn.net/qq_42847094/article/details/108036468

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

固定定位（fixed）

固定定位（fixed）：根据浏览器的位置定位，会脱离正常的文档流。（不占原来的空间）

position:fixed; 必须配合 left , right , top , bottom 才能具体定位到浏览器的具体位置上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background: skyblue;
				/*固定定位*/
				position: fixed; /*不占居原来的位置空间*/
				right: 100px;
				top:100px;
			}
			#d2{
				width: 300px;
				height: 1000px;
				background: orange;
			}
			#d3{
				width: 300px;
				height: 1000px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
		<div id="d3">
			
		</div>
	</body>
</html>

效果：
在这里插入图片描述

相对定位（relative）

相对定位（relative）：相对于自己当前的位置进行定位。不会脱离文档流，只是样子移动了。（占原来的空间）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background: skyblue;
				/*相对定位*/
				position: relative; /*占居原来的位置空间，相对于自己*/
				left: 100px;
				top:100px;
			}
			#d2{
				width: 300px;
				height: 1000px;
				background: orange;
			}
			#d3{
				width: 300px;
				height: 1000px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
		<div id="d3">
			
		</div>
	</body>
</html>

效果：
在这里插入图片描述

绝对定位（absolute）

绝对定位（absolute）：相对于设置了定位的 父元素或者是祖先元素进行定位。会脱离正常文档流。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background: skyblue;
				/*相对定位*/
				position: absolute; /*占居原来的位置空间，相对于自己*/
				left: 100px;
				top:100px;
			}
			#d2{
				width: 300px;
				height: 1000px;
				background: orange;
			}
			#d3{
				width: 300px;
				height: 1000px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
		<div id="d3">
			
		</div>
	</body>
</html>

效果：
在这里插入图片描述

静态定位

静态定位（默认情况，不做定位）

粘性定位（sticky)

粘性定位（sticky)：占原来位置，不多用

CodeCode!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7、CSS定位的说明和应用

文章目录固定定位（fixed）相对定位（relative）绝对定位（absolute）静态定位粘性定位（sticky)固定定位（fixed）固定定位（fixed）：根据浏览器的位置定位，会脱离正常的文档流。（不占原来的空间）position:fixed; 必须配合 left , right , top , bottom 才能具体定位到浏览器的具体位置上。<!DOCTYPE html><html> <head> <meta charset="utf-8
复制链接

扫一扫