CSS中的定位

最新推荐文章于 2024-06-01 16:06:49 发布

墨鸦あ

最新推荐文章于 2024-06-01 16:06:49 发布

阅读量95

点赞数

文章标签：定位 css

本文链接：https://blog.csdn.net/qq_44116724/article/details/114229797

版权

文章目录

一、相对定位（relative）
二、绝对定位（absolute）
三、静态定位（static）
四、固定定位（fixed）

一、相对定位（relative）

使用相对定位的元素，通过 top，bottom，left，right 的位置相对于其正常位置进行定位，不会改变其他元素的布局，会在此元素本来位置留下空白。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				float: left;
			}
			.A{
				background-color: red;
			}
			.B{
				background-color: blue;
				position: relative;
				top: 200px;
			}
			.C{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="A"></div>
		<div class="B"></div>
		<div class="C"></div>
	</body>
</html>

示例：
在这里插入图片描述

二、绝对定位（absolute）

绝对定位会脱离原文档流，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果父级元素没有定位，则会相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，则依据 body 元素左上角作为参考进行定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				float: left;
			}
			.A{
				background-color: red;
			}
			.B{
				background-color: blue;
				position: absolute;
				top: 200px;
			}
			.C{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="A"></div>
		<div class="B"></div>
		<div class="C"></div>
	</body>
</html>

示例：
在这里插入图片描述

三、静态定位（static）

静态定位是HTML 元素默认情况下的定位方式，静态定位的元素不会受到top，right，bottom，left，z-index属性的影响，根据页面正常文档流定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				float: left;
			}
			.A{
				background-color: red;
			}
			.B{
				background-color: blue;
				position: static;
				top: 200px;
			}
			.C{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="A"></div>
		<div class="B"></div>
		<div class="C"></div>
	</body>
</html>

示例：
在这里插入图片描述

四、固定定位（fixed）

固定定位与绝对定位相似，但是会相对于浏览器窗口进行定位，一般用于制作固定在页面顶部或者侧边栏，不会随着滚动条进行滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				float: left;
			}
			.A{
				background-color: red;
			}
			.B{
				background-color: blue;
				position: fixed;
				top: 200px;
			}
			.C{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="A"></div>
		<div class="B"></div>
		<div class="C"></div>
	</body>
</html>

示例：
在这里插入图片描述

墨鸦あ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS中的定位

文章目录一、相对定位（relative）二、绝对定位（absolute）三、静态定位（static）四、固定定位（fixed）一、相对定位（relative）使用相对定位的元素，通过 top，bottom，left，right 的位置相对于其正常位置进行定位，不会改变其他元素的布局，会在此元素本来位置留下空白。<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <titl..
复制链接

扫一扫