CSS之定位（定位/相对定位）

最新推荐文章于 2023-06-04 14:02:00 发布

不动声色的小蜗牛

最新推荐文章于 2023-06-04 14:02:00 发布

阅读量281

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107379358

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

定位/相对定位：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位/相对定位</title>
		<style>
			body{
				font-size: 60px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: orange;
				
				/*
					定位（position）
						-定位是一种更加高级的布局手段
						-通过定位可以将元素摆放到页面的任意位置
						-使用position属性来设置定位
							可选值：
								static 默认值 元素是静止的，没有开启定位
								relative 开启元素的相对定位
								absolute 开启元素的绝对定位
								fixed 开启元素的固定定位
								sticky 开启元素的粘性定位
								
						-相对定位：
							当元素的position属性值设置为relative时则开启了元素的相对定位
							-相对定位的特点：
								1、元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
								2、相对定位是参照于元素在文档流中的位置进行定位的
								3、相对定位会提升元素的层级
								4、相对定位不会使元素脱离文档流
								5、相对定位不会改变元素的性质，是块还是块，行内还是行内
								
						-偏移量（offset）
							-当元素开启定位以后，可以通过偏移量来设置元素的位置
								top
									-定位元素和定位位置上边的距离
								bottom
									-定位元素和定位位置下边的距离
									
									-定位元素垂直方向的位置由top和bottom两个属性来控制
										通常情况下我们只会使用其中一个
									-top值越大，定位元素越向下
								left
									-定位元素和定位位置的左侧距离
								right
									-定位元素和定位位置的右侧距离
									
									-定位元素水平方向的位置由left和right两个属性来控制
				 */
				position: relative;
				top: -200px;
				left: 200px;
				
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</body>
</html>

不动声色的小蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS之定位（定位/相对定位）

定位/相对定位：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>定位/相对定位</title> <style> body{ font-size: 60px; } .box1{ width: 200px; height: 200px; background-color: #bfa;
复制链接

扫一扫