【必看】CSS如何调整一个元素的任意位置-外边距-浮动-定位

调整一个元素的任意位置

在界面设计中最常见的就是调整任意元素的任意位置，这也是一个难点！

说到调整元素的位置就不得不提一下【参照物】，这个很重要，参照物决定了一个元素的移动范围，并不是想怎么移动就能怎么移动的。

方法1：外边距-margin

外边距既是一个元素的外部距离，作用是控制多个元素之间的间距，但是也可以用来改变一个元素的自身位置。

参照物：自己

可以利用外边距调整一个元素在原本位置上的位置，这种方法在某些特殊情况下会出现一些问题：例如：外边距合并、影响其他元素等。因此不太推荐用词方法来调整一个元素的位置。通常用于调整元素间的间距。

方法：

• margin-left: ???px; - 距离上级元素左边的距离，正值自身向右移动，负值向左移动，下面的元素会跟着一起移动
• margin-right: ???px; - 距离上级元素右边的距离，正值把右边的元素挤开，负值和右边的元素叠在一起，自身不移动
• margin-top: ???px; - 距离上级元素顶部的距离，正值自身向下移动，负值向上移动，下面的元素会跟着一起移动
• margin-bottom: ???px; - 距离上级元素底部的距离，正值把下面的元素挤开，负值和下面的元素叠在一起，自身不移动

案例：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="new_file.css"/>
	</head>
	<body>
		<div class="parent">
			上级元素
			<div class="child-1"> 
				第一个子元素<br>
				/*距离上级元素左边50像素,自身往右移动*/<br>
				/*距离上级元素顶部-18像素,自身往上移动*/<br>
				/*距离下面的元素的顶部-18像素,自身不移动,
				下面的向上移动10像素*/
			</div>
			<div class="child-2"> 
				第二个子元素 <br>
				会随同【第一个子元素】一起向上移动
			</div>
		</div>
	</body>
</html>

.parent {
	width: 500px;
	height: 400px;
	background-color: green;
}
.child-1{
	width: 350px;
	height: 200px;
	background-color: yellow;
	/***********************/
	/*距离自身原本位置左边50像素,自身往右移动*/
	margin-left: 100px;
	/*距离自身原本位置顶部-18像素,自身往上移动*/
	margin-top: -18px;
	/*自身底部-18像素,自身不移动,下面的向上移动10像素*/
	margin-bottom: -50px;
	/***********************/
}
.child-2{
	width: 300px;
	height: 100px;
	background-color: palevioletred;
}

方法2：浮动-float

浮动功能比较单一，只能实现向左和向右排版。

参照物：上一级父元素

再上一级的范围内浮动，如果上级没有高度，则会影响后面的元素。

方法：

• float:left; - 浮动到上级父元素的左边
• float:right; - 浮动到上级父元素的右边

案例：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="new_file.css"/>
	</head>
	<body>
		<div class="parent">
			上级元素
			<div class="child-1"> 
				第一个子元素
			</div>
			<div class="child-2"> 
				第二个子元素
			</div>
		</div>
	</body>
</html>

.parent {
	width: 500px;
	height: 400px;
	background-color: green;
}
.child-1{
	width: 100px;
	height: 200px;
	background-color: yellow;
	/***********************/
	/* 整个元素在上级元素的左边 */
	float: left;
	/***********************/
}
.child-2{
	width: 300px;
	height: 100px;
	background-color: palevioletred;
	/***********************/
	/* 整个元素在上级元素的右边 */
	float: right;
	/***********************/
}

方法3：相对定位-relative

相对定位是三种定位中的一种，相对于自身的位置移动，有点类似外边距margin，但是此种方法不会影响其他元素，最多就是移动后会把别的元素覆盖住，使用z-index属性可以调整覆盖顺序。

参照物：自身

方法：
先定位，载使用left、right、top、bottom四个属性来调整位置。

• left:??px; - 距离左边的距离，正值自身往右移动，负值自身往左移动
• right:??px; - 距离右边的距离，正值自身往左移动，负值自身往右移动
• top:??px; - 距离顶部的距离，正值自身往下移动，负值自身往上移动
• bottom:??px; - 距离底部的距离，正值自身往上移动，负值自身往下移动

一把左右只需要使用一个，上下也只需要使用一个即可。

案例：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="new_file.css"/>
	</head>
	<body>
		<div class="parent">
			上级元素
			<div class="child-1"> 
				第一个子元素
			</div>
			<div class="child-2">
				后面的元素，被【第一个子元素】覆盖住了
			</div>
		</div>
	</body>
</html>

.parent {
	width: 500px;
	height: 400px;
	background-color: green;
}
.child-1{
	width: 100px;
	height: 200px;
	background-color: yellow;
	/***********************/
	position: relative;
	/* 向下移动100像素 */
	top: 100px;
	/* 向右移动100像素 */
	left: 100px;
	/***********************/
}
.child-2{
	height: 80px;
	background-color: red;
}

方法4：绝对定位-absolute

绝对定位也是三种定位中的一种，主要功能是在某个上级的范围内移动。

参照物：已经定位的上级（不一定是上一级）

方法：

1. 给需要调整位置的元素使用绝对定位
2. 对某个范围限制的父元素上使用三种定位中的一种

案例：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="new_file.css"/>
	</head>
	<body>
		<div class="parent">
			第一级
			<div class="child"> 
				第二级
				<div class="son">
					第三级
				</div>
			</div>
		</div>
	</body>
</html>

.parent {
	width: 500px;
	height: 400px;
	background-color: green;
	/* 作为第二级的参照物 */
	position: relative;
}
.child{
	width: 400px;
	height: 300px;
	background-color: yellow;
	/***********************/
	/* 给自己定位,同时也是下级的参照物 */
	position: absolute;
	/* 绝对居住的第一种方法 */
	left: 0;right: 0;top: 0;bottom: 0;
	margin: auto;
	/***********************/
}
.son{
	width: 300px;
	height: 200px;
	background-color: red;
	/***********************/
	/* 给自己定位,同时也是下级的参照物 */
	position: absolute;
	/* 绝对居住的第二种方法 */
	left: 50%;top: 50%;
	margin-left: -150px;
	margin-top: -100px;
	/***********************/
}

方法5：固定定位-fixed

固定定位三种定位中的一种，相对于整个浏览器窗口左定位。不会跟随页面滚动，时固定的。

参照物：整个浏览器页面

案例：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="new_file.css"/>
	</head>
	<body>
		<div class="parent">
			<div class="child"> 
				固定定位
			</div>
		</div>
	</body>
</html>

.parent {
	width: 500px;
	height: 1000px;
	background-color: green;
}
.child{
	width: 100px;
	height: 100px;
	background-color: yellow;
	/***********************/
	position: fixed;
	/* 固定到页面的右边的中间 */
	/* 不会跟随页面滚动,永远固定 */
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	/***********************/
}

总结

当然还有别的方法，最常用的就是这几种，并且这几种的用法也只是简单涉猎，真正使用的时候比这个复杂多了，比较企业真实需求是变化多端的，并且是复杂的。

因此本次知识带大家入门，如果需要完整的学习CSS的核心技术，推荐我的录制视频：

视频教程

1、2020年新型前端HTML5 CSS3 JS Canvas AJAX Http前后端交互（文档课件）