一文读懂css【css3】绝对（absolute）定位和相对（relative）定位相对定位是相对谁定位的绝对定位又是根据谁绝对定位的子绝父相包含块

冷不防 2023-09-28 16:30 51阅读 0赞

#### 目录 ####

*  何为定位
 *  偏移量
 *   *  垂直方向
     *   *  top
         *  bottom
     *  水平方向
     *   *  left
         *  right
 *  relative-相对定位
 *   *  何为相对定位
     *  相对定位的特点
     *  实例
     *   *  元素代码的起始位置
         *  元素若不开启相对定位，即便设置了偏移量，元素也不会发生任何的变化。
         *  元素开启相对定位，也设置偏移量
         *   *  top偏移量
             *  left偏移量
             *  bottom偏移量
             *  right 偏移量
 *  绝对定位-absolute
 *   *  何谓绝对定位
     *  绝对定位的特点
     *  布局等式
     *   *  水平方向布局等式
         *  垂直方向布局等式
     *  包含块
     *   *  重要说明
     *  子绝父相
     *   *  开启绝对定位的父元素不开启相对定位
         *  开启绝对定位的父元素开启了相对定位
 *  总结

## 何为定位 ##

我们可以通过定位将元素摆放到页面的任意位置，因为它是一种高级的布局手段，它有以下5个可选值：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>static</td> 
   <td>默认值，元素是静止的，没有开启定位</td> 
  </tr> 
  <tr> 
   <td>relative</td> 
   <td>开启元素的相对定位</td> 
  </tr> 
  <tr> 
   <td>absolute</td> 
   <td>开启元素的绝对定位</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>开启元素的固定定位</td> 
  </tr> 
  <tr> 
   <td>sticky</td> 
   <td>开启元素的粘滞定位</td> 
  </tr> 
 </tbody> 
</table>

对于以上5个可选值，我们最易弄混的便是`relative`和`absolute`这两个。

因而，就这两个可选值进行如下详细分析，但在分析之前，我们要考虑下偏移量，因为偏移量对定位是有很大影响的。

比如如果元素开启了相对定位，但不设置偏移量，元素不会发生任何的变化。

## 偏移量 ##

只要元素开启了定位，我们可以通过偏移量来设置元素的位置。

### 垂直方向 ###

定位元素垂直方向的位置由`top`和 `bottom`两个属性来控制，但通常情况下，**我们只会使用其中之一。**

**垂直方向的元素大小（是相对父元素）：top + margin-top + border-top + position-top + content + position-bottom + border-bottom + margin-bottom + bottom**

#### top ####

*  定位元素和定位位置上边的距离。
 *  top值越大，定位元素越向下移动。
 *

#### bottom ####

*  定位元素和定位位置下边的距离。
 *  `bottom`值越大，定位元素越向上移动。

### 水平方向 ###

定位元素水平方向的位置由`left`和`right`两个属性控制，通常情况下，**我们只会使用其中之一。**

**水平方向的元素大小（是相对父元素）：left + margin-left + border-left + position-left + content + position-right + border-right + margin-right + right**

#### left ####

*  定位元素和定位位置的左侧距离。  
    \-`left`越大，元素越靠右。

#### right ####

*  定位元素和定位位置的左侧距离。
 *  `right`越大，元素越靠右。

## relative-相对定位 ##

### 何为相对定位 ###

当元素的position的属性值设置为relative时，即开启了元素的相对定位。

开启相对定位的元素相对其在起始位置的移动距离，即其起始位置为：`top:0,left:0`

### 相对定位的特点 ###

1.  元素开启相对定位以后，如果不设置偏移量，元素不会发生任何的变化。
2.  它是参照于元素在文档流中的位置进行定位的。
3.  它会提升元素的层级。
4.  它不会使元素脱离文档流。
5.  它不会改变元素的性质：块元素还是块元素，行内元素还是行内元素。

### 实例 ###

#### 元素代码的起始位置 ####

现在有个`div元素`，如下代码所示：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>模拟relative</title>
    
    		<style type="text/css">
    			.div {
          
    				width: 200px;
    				height: 200px;
    				border: medium solid green;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div"></div>
    	</body>
    </html>

元素的起始位置，便是其距离浏览器顶部和左部为0的位置，即\`\`\`left:0,top:0···，入土所示：  
![在这里插入图片描述][7aec92971fb543f2ae546314ff6b1d6d.png]

#### 元素若不开启相对定位，即便设置了偏移量，元素也不会发生任何的变化。 ####

此时，在div的元素加上 ···top: 100px;\`\`\`样式，如代码所示：

.div {
        
    	width: 200px;
    	height: 200px;
    	border: medium solid green;
    	top: 100px;
    }

你会发现，没有设置`position:relative`，即便设置了`top:100px`，元素依旧没有发生变化，还是在其起始位置，如图所示：

![在这里插入图片描述][b984ed0f572b489b805c7ce514c11814.png]

#### 元素开启相对定位，也设置偏移量 ####

##### top偏移量 #####

在div元素加上`top: 100px; position: relative;`样式，如代码所示：

.div {
        
    	width: 200px;
    	height: 200px;
    	border: medium solid green;
    	top: 100px;
    	position: relative;
    }

此时代码相对其起始位置往下偏移了100px，如图所示：

![在这里插入图片描述][feb830aee69740649f465a7574dc6bf5.png]  
其在垂直方向向下移动100px，即上边框距离其起始位置的上边框100px。

但，其仍旧是块元素， 没有脱离文档流（水平方向仍占据一行）。

##### left偏移量 #####

在div元素加上`top: 100px;position: relative;`样式，如代码所示：

.div {
        
    	width: 200px;
    	height: 200px;
    	border: medium solid green;
    	top: 100px;
    	left: 100px;
    	position: relative;
    }

其在垂直方向向下移动100px，即上边框距离其起始位置的上边框100px。

同时，其在水平方向向右移动100px，即上边框距离其原始位置的左边框100px。

但，其仍旧是块元素， 没有脱离文档流（水平方向仍占据一行）。  
![在这里插入图片描述][a9982afcb6a74a6ca56ce8a54dcdbc85.png]

##### bottom偏移量 #####

在div元素加上`bottom: 100px; position: relative;`样式，如代码所示：

.div {
        
    	width: 200px;
    	height: 200px;
    	border: medium solid green;
    	bottom: 100px;
    	position: relative;
    }

其在垂直方向向上移动100px，即上边框距离其起始位置的上边框-100px，如图所示：  
![在这里插入图片描述][3c9a5b155d0246b0933310f6c0916d7e.png]

##### right 偏移量 #####

在div元素加上`right: 100px; position: relative;`样式，如代码所示：

.div {
        
    	width: 200px;
    	height: 200px;
    	border: medium solid green;
    	right: 100px;
    	position: relative;
    }

其在水平方向向右移动100px，即左边框距离其起始位置的左边框是-100px，如图所示：  
![在这里插入图片描述][1cc6906f5ee446fab898aebfa06aad5d.png]

## 绝对定位-absolute ##

### 何谓绝对定位 ###

当元素的`position`的属性值设置为`absolute`时，则开启了元素的绝对定位。

### 绝对定位的特点 ###

1.  开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化。
2.  开区绝对定位后的元素脱离文档流
3.  绝对定位会改变元素的性质，行内变成快，快的高度被内容撑开。
4.  决定定位会使元素提升一个层级。
5.  绝对定位元素时相对于其`包含块`进行定位的。

### 布局等式 ###

#### 水平方向布局等式 ####

水平方向的元素大小（是相对父元素）：left + margin-left + border-left + position-left + content + position-right + border-right + margin-right + right

#### 垂直方向布局等式 ####

垂直方向的元素大小（是相对父元素）：top + margin-top + border-top + position-top + content + position-bottom + border-bottom + margin-bottom + bottom\*\*

### 包含块 ###

在正常情况下，包含块就是离当前元素最近的祖先快元素，比如：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>包含块</title>
    </head>
    <body>
    
    <div id="div1">
        <div id="div2">
          
        </div>
    </div>
    </body>
    </html>

`id = div1`便是 `id = div2`的包含块。

#### 重要说明 ####

html是根元素，初始包含块。

### 子绝父相 ###

如果当前元素开启了绝对定位，那么其父元素便需要开启相对元素。

#### 开启绝对定位的父元素不开启相对定位 ####

假如元素开启了绝对定位后，但父元素没有开启相对定位，那么布局会是什么样的呢，如下代码所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>包含块元素</title>
    
        <style>
    
            #div1 {
          
                width: 50px;
                height: 50px;
                border: 1px solid green;
            }
    
            #div2 {
          
                left: 10px;
                top: 10px;
                width: 20px;
                height: 20px;
                border: 1px solid red;
                position: absolute;
            }
        </style>
    </head>
    <body>
    
    <div id="div1">
        <div id="div2">
    
        </div>
    </div>
    </body>
    </html>

输出结果如下图：

![在这里插入图片描述][8fb82442e63540d2a1fa55f79642aba3.png]  
此时，`id = div2`便是相对于根元素`html`布局，其水平布局等式便是：

html大小 = left + margin-left + border-left + position-left + content + position-right + border-right + margin-right + right 
    即如下 
    798.400px = 10px + 0px + 1px + 20px + 0px +  1px + 0px + 766.400px

#### 开启绝对定位的父元素开启了相对定位 ####

如果开启绝对定位的父元素开启了相对定位，那么子元素的布局又会是什么情况呢？如下代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>包含块元素</title>
    
        <style>
    
            #div1 {
          
                width: 50px;
                height: 50px;
                border: 1px solid green;
                position: relative;
            }
    
            #div2 {
          
                left: 10px;
                top: 10px;
                width: 20px;
                height: 20px;
                border: 1px solid red;
                position: absolute;
            }
        </style>
    </head>
    <body>
    
    <div id="div1">
        <div id="div2">
    
        </div>
    </div>
    </body>
    </html>

结果如图所示：

![在这里插入图片描述][13b24b48811e431a97633af1e714055b.png]  
父元素`（id = div1）`的大小为 40px，那么子元素`（ id= div2）`的总大小为多少呢，根据下面的公式计算可得：

html大小 = left + margin-left + border-left + position-left + content + position-right + border-right + margin-right + right 
    即如下 
    40px = 10px + 0px + 1px + 20px + 0px +  1px + 0px + 18px

因而，你会看到如果子元素开了绝对定位后，父元素也可开启相对定位，那么，子元素的整体大小便为父元素的大小。

## 总结 ##

相对定位：是针对自身起始位置的定位

绝对定位：是相对包含块（离当前元素最近的父元素）定位的

[7aec92971fb543f2ae546314ff6b1d6d.png]: https://img-blog.csdnimg.cn/7aec92971fb543f2ae546314ff6b1d6d.png
[b984ed0f572b489b805c7ce514c11814.png]: https://img-blog.csdnimg.cn/b984ed0f572b489b805c7ce514c11814.png
[feb830aee69740649f465a7574dc6bf5.png]: https://img-blog.csdnimg.cn/feb830aee69740649f465a7574dc6bf5.png
[a9982afcb6a74a6ca56ce8a54dcdbc85.png]: https://img-blog.csdnimg.cn/a9982afcb6a74a6ca56ce8a54dcdbc85.png
[3c9a5b155d0246b0933310f6c0916d7e.png]: https://img-blog.csdnimg.cn/3c9a5b155d0246b0933310f6c0916d7e.png
[1cc6906f5ee446fab898aebfa06aad5d.png]: https://img-blog.csdnimg.cn/1cc6906f5ee446fab898aebfa06aad5d.png
[8fb82442e63540d2a1fa55f79642aba3.png]: https://img-blog.csdnimg.cn/8fb82442e63540d2a1fa55f79642aba3.png
[13b24b48811e431a97633af1e714055b.png]: https://img-blog.csdnimg.cn/13b24b48811e431a97633af1e714055b.png