【web前端开发】CSS定位

灰太狼 2023-09-27 15:32 110阅读 0赞

#### 文章目录 ####

*  1.定位介绍
 *  2.定位的方式
 *   *  2.1 相对定位
     *  2.2 绝对定位
     *   *  2.2.1 子绝父相
     *  2.3 固定定位
 *  3. 元素的层级关系
 *  4. 总结

## 1.定位介绍 ##

定位有两个作用:  
1.可以**解决**盒子和盒子之间的**层叠问题** (定位之后元素层级最高,可以层叠在其它盒子上面)  
2.可以让盒子始终固定在屏幕中的某个位置

属性名:position

常见的属性值:

<table> 
 <thead> 
  <tr> 
   <th>定位方式</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>静态定位</td> 
   <td>static</td> 
  </tr> 
  <tr> 
   <td>相对定位</td> 
   <td>relative</td> 
  </tr> 
  <tr> 
   <td>绝对定位</td> 
   <td>absolute</td> 
  </tr> 
  <tr> 
   <td>固定定位</td> 
   <td>fixed</td> 
  </tr> 
 </tbody> 
</table>

ps: 这四个取值中第一个就是不定位,加和不加都是一个效果.

设置position只是设置定位的方式.除了定位方式**还要设置偏移值**

偏移值设置分为两个方向(水平和垂直方向)

<table> 
 <thead> 
  <tr> 
   <th>方向</th> 
   <th>属性名</th> 
   <th>属性值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>水平</td> 
   <td>left</td> 
   <td>数字+px</td> 
   <td>距离左边的距离</td> 
  </tr> 
  <tr> 
   <td>水平</td> 
   <td>right</td> 
   <td>数字+px</td> 
   <td>距离右边的距离</td> 
  </tr> 
  <tr> 
   <td>垂直</td> 
   <td>top</td> 
   <td>数字+px</td> 
   <td>距离上边的距离</td> 
  </tr> 
  <tr> 
   <td>垂直</td> 
   <td>bottom</td> 
   <td>数字+px</td> 
   <td>距离下边的距离</td> 
  </tr> 
 </tbody> 
</table>

ps:这里的属性值可以写成百分比的形式

## 2.定位的方式 ##

前面说了定位方式有4种,静态定位,相对定位,绝对定位和固定定位  
静态定位就是不定位,重点是另外三种定位方式

### 2.1 相对定位 ###

相对定位就是**相对自己原来的位置**进行移动

position: relative;

效果演示:  
这是没有设置定位前的效果:  
![在这里插入图片描述][0757ba6a310a443eadb54b06c3cb4f11.png]

设置定位后:  
![在这里插入图片描述][b59d35fa0df2470ab3fe4317738a14db.png]  
可以看到div在原有位置的基础上,向右边和下边偏移了50px. 注意偏移方向以及盒子移动的方向.

![在这里插入图片描述][aaafc2552c0440b9bf5ada5d1564dc51.png]  
在这里可以看到div已经压在p标签上了,已经脱标了.但是p标签并不没有发生变化. **说明相对定位的元素依旧占有原有的位置** .与浮动不同.设置浮动的话p标签会跑到最上面到最上面.这也是使用浮动可能会让其它元素受到的影响  
打开开发者工具看一下:  
![在这里插入图片描述][54fc8240e6b8418896c79e7b89a93d0c.png]  
相对定位并不会改变标签原有的特点,如这里的div.块级元素独占一行.定位之后,依旧独占一行

其中这里有一些问题需要注意:

*  设置定位方式后,不要忘记设置偏移量.不然会没有效果
 *  设置偏移量时,**只需水平和垂直方向各设置一个就行**.但是如果都写上.那么水平方向以left(左)为主,垂直方向以top(上)为主

### 2.2 绝对定位 ###

position: absolute;

绝对定位:相对于非静态定位的父元素进行定位移动  
绝对定位会先找已经定位的父元素,如果有这样的父元素,会以父元素为参考进行定位.如果有父元素,但是没有定位,会以浏览器的窗口为参考进行定位.

代码演示:  
依旧是刚才的代码, 没设置绝对定位前的效果  
![在这里插入图片描述][963570f79473444499b9ae668e56583c.png]  
设置绝对定位后的效果:  
![在这里插入图片描述][efae062555c84d28a2177fcaecbce318.png]  
可以看到设置绝对定位之后,p标签跑到最上面了.此时的div已经脱标(脱离标准文档)了.  
打开开发者工具:  
![在这里插入图片描述][d3596fbb2a954d4ea9d54e02fb0efb28.png]  
我们可以看到设置绝对定位之后的div已经不是块级元素了. 而是变成行内块元素.

在没有设置偏移量前可以看到目前这个div与浏览器还有一段缝隙的  
![在这里插入图片描述][60e210c31a95410bbcbf2147c5c65cf6.png]  
如果给它加一个向左偏移0之后,可以看到此时div已经和浏览器贴在一起了  
![在这里插入图片描述][ed8ce14a052041af99f04ca7357677ec.png]  
在刚开始讲绝对定位时,就谈到过如果有父元素,但是父元素没有设置定位,就会以浏览器的窗口为参照进行定位.  
上述案例中的div是body,但是body并没有设置定位,所以div就是以浏览器为参照进行定位了

#### 2.2.1 子绝父相 ####

刚才谈到绝对定位可以以父元素为参照进行定位,有两个条件,一是有复原色,二是父元素有定位. 父元素的定位是相对定位和绝对定位其实都可以,但是一般都会**给父元素设置相对定位,子元素设置绝对定位.这个就叫做子绝父相.**  
![在这里插入图片描述][bf07b0f95d814deb9544c477876a16e4.png]  
粉色div盒子使蓝色div盒子的父元素,给粉色div设置相对定位,而蓝色div设置绝对定位.此时蓝色div就是以粉色div为参考进行定位.

**注意: 绝对定位寻找父元素的方式为就近寻找.在开发过程中,一个元素可能有很多父元素,如果要给它设置绝对定位,就是以它最近的父元素逐个往外找,直到找到或者以浏览器为参照**

### 2.3 固定定位 ###

position: fixed;

固定定位是相对于浏览器进行定位移动. 简单来说就是元素始终位于浏览器的某个位置上,比如一些导航栏,就是使用的固定定位  
代码演示:  
设置固定定位前  
![在这里插入图片描述][f54fb4b2325a4fda8564c41a250bff14.png]  
加上固定定位后:  
![在这里插入图片描述][6d0ea9fe705e4e0491946146fb7ef5c6.png]  
可以看到div已经脱标了,不在占有原有的位置.固定定位的参考位置是浏览器, 使用固定定位的标签具有行内块元素的特点.

## 3. 元素的层级关系 ##

定位可以是元素脱标,而浮动也可以使元素脱标.那么它们之间的层级关系是什么样的呢?  
直接给结论: `定位>浮动>标准流`

定位还分相对定位,绝对定位和固定定位,如果是定位使标准流脱标,那么它们之间的层级关系则是:

*  相对定位,绝对定位和固定定位默认的层级相同.需要书写的位置,写在下面的层级关系更高,会覆盖写在上面的元素.

## 4. 总结 ##

定位分为静态定位,相对定位,绝对定位和固定定位.要清楚知道每种定位的特点,和绝对定位中的子绝父相,以及各元素之间的层级关系.

> 感谢你的观看!希望这篇文章能帮到你!  
> 专栏:[《web前端开发》][web] 在不断更新中,欢迎订阅!  
> “愿与君共勉,携手共进!”  
> ![在这里插入图片描述][8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]

[0757ba6a310a443eadb54b06c3cb4f11.png]: https://img-blog.csdnimg.cn/0757ba6a310a443eadb54b06c3cb4f11.png
[b59d35fa0df2470ab3fe4317738a14db.png]: https://img-blog.csdnimg.cn/b59d35fa0df2470ab3fe4317738a14db.png
[aaafc2552c0440b9bf5ada5d1564dc51.png]: https://img-blog.csdnimg.cn/aaafc2552c0440b9bf5ada5d1564dc51.png
[54fc8240e6b8418896c79e7b89a93d0c.png]: https://img-blog.csdnimg.cn/54fc8240e6b8418896c79e7b89a93d0c.png
[963570f79473444499b9ae668e56583c.png]: https://img-blog.csdnimg.cn/963570f79473444499b9ae668e56583c.png
[efae062555c84d28a2177fcaecbce318.png]: https://img-blog.csdnimg.cn/efae062555c84d28a2177fcaecbce318.png
[d3596fbb2a954d4ea9d54e02fb0efb28.png]: https://img-blog.csdnimg.cn/d3596fbb2a954d4ea9d54e02fb0efb28.png
[60e210c31a95410bbcbf2147c5c65cf6.png]: https://img-blog.csdnimg.cn/60e210c31a95410bbcbf2147c5c65cf6.png
[ed8ce14a052041af99f04ca7357677ec.png]: https://img-blog.csdnimg.cn/ed8ce14a052041af99f04ca7357677ec.png
[bf07b0f95d814deb9544c477876a16e4.png]: https://img-blog.csdnimg.cn/bf07b0f95d814deb9544c477876a16e4.png
[f54fb4b2325a4fda8564c41a250bff14.png]: https://img-blog.csdnimg.cn/f54fb4b2325a4fda8564c41a250bff14.png
[6d0ea9fe705e4e0491946146fb7ef5c6.png]: https://img-blog.csdnimg.cn/6d0ea9fe705e4e0491946146fb7ef5c6.png
[web]: https://mp.csdn.net/mp_blog/manage/column/columnManage/12118781
[8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]: https://img-blog.csdnimg.cn/8fbf2a7f2d0e4db782e58035677a303d.png#pic_center