CSS 定位position属性详细介绍

你的名字 2021-02-01 15:55 906阅读 0赞

**前言：在使用css给页面进行排版美化的过程中，经常会用到pposition属性。那么，接下来我们就详细介绍一下position属性。**

## 首先，我们先写一个HTML文件，利用css实现多行内容垂直居中。 ##
````
<div class="wrap">
<div class="content">
<h1>hello world</h1>
<h2>HELLO WORLD</h2>
<h3>层叠样式表</h3>
</div>
</div>
````
## 接下来我们使用css进行布局排版： ##
````
.wrap{
	width:100%;
	height:400px;
	display:table;
}
.content{
	display:table-cell;
	vertical-align:table;
	text-align:center;
}
````
##position属性：##

一**、静态定位/常规定位/自然定位static**

**作用：**使元素定位于自然流中

**特点：**

*  **1**、忽略top、bottom、left、right或者z-index声明
 *  **2**、两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的
 *  **3**、具有固定width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大到占满剩余宽度，造成的效果就是这个块水平居中

**二、 相对定位relative**

**作用**：使元素成为可定位的祖先元素

**特点**：

*  **1**、可以使用top/right/bottom/left/z-index进行相对定位，相对元素在自然流中的位置
 *  **2**、相对定位的元素在自然流中的位置会被保留
 *  **3**、任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位
 *  **4**、可以使浮动元素发生偏移（解决两个浮动元素设置t/r/b/l无效的问题），并控制它们的堆叠顺序

**三、绝对定位absolute**

**作用**：使元素脱离自然流

**特点**：

*  **1**、脱离自然流
 *  **2**、设置尺寸的百分比比的是最近可定位的祖先元素
 *  **3**、lrtb如果设置为0，它将对齐到最近可定位祖先元素的各边（衍生水平垂直居中妙计）
 *  **4**、如果没有最近可定位祖先元素，会认作为可定位祖先元素
 *  **5**、z-index可以控制堆叠顺序

**四、 固定定位fixed**

**作用**：和绝对定位作用相似

**特点**：

*  **1**、相对于浏览器视口定位
 *  **2**、固定定位元素不会随着视口滚动而滚动
 *  **3**、继承absolue的特点

##利用position实现子元素垂直居中##
````
<div class="wrap">
<div class=""content></div>
</div>

.wrap {
	width: 200px;
	height: 200px;
	background: blue;
	position: relative;
}
.content {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto auto;
}
````
以上就是CSS 定位position属性详细介绍的详细内容。