Position属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44573938/article/details/88949598

Position属性

Position属性用于定位元素，规定元素的位置，最常见的是position：relative相对定位以及position：absolute绝对定位。Position属性可以用于定位任何元素。元素可以使用顶部top、底部bottom、左边left、右边right四个属性进行定位。
1、position：relative相对定位
设置相对定位的元素会相对于这个元素原来的位置进行移动。
代码：

<style> 
body{
		background: #FCF9F2;
		margin: 100px;
	}
					div{
						font-size: 50px;
					}
					.relative{
						color: red;
						/*position: relative;
						right: 50px;
						top: -100px;*/
					}
				</style>
				<body>
					<div>正常位置</div>
					<div class="relative">relative移动位置</div>
				</body>

页面显示截图:
正常情况：
在这里插入图片描述
设置relative移动位置：

2、position：absolute绝对定位
设置绝对定位的元素，元素可以移动到页面上的任何位置，在没有已经定位的父级元素的情况下可以以HTML页面为准移动位置。
代码：

				<style> 
					body{
						background: #FCF9F2;
						margin: 100px;
					}
					div{
						font-size: 50px;
					}
					.absolute{
						color: red;
						/*position: absolute;
						left: 50px;
						top: 50px;*/
					}
				</style>
				<body>
					<div>正常位置</div>
					<div class="absolute">absolute移动位置</div>
				</body>

页面显示截图:
正常情况：
在这里插入图片描述
设置absolute移动位置：

设置绝对定位的元素在有已经定位的父级元素的情况下，就是有父级元素设置了relative相对定位可以以父级元素为准移动位置。

代码：

				<style>
					body{
						background: #FCF9F2;
						margin: 100px;
					}
					div{
						font-size: 50px;
					}
					.relative{
						position: relative;
					}
					.absolute{
						color: red;
						position: absolute;
						left: 50px;
						top: 50px;
					}
				</style>
				<body>
					<div class="relative">
						<div>正常位置</div>
						<div class="absolute">absolute移动位置</div>
					</div>
				</body>

页面显示截图:（此正常情况与上图相同）
设置absolute相对于relative移动位置：

在这里插入图片描述
对于position属性的介绍就到这里了。