CSS-定位

巷子里有条狗

已于 2023-03-30 22:23:29 修改

阅读量159

点赞数

分类专栏：前端文章标签： css 前端 html

于 2023-03-30 18:40:26 首次发布

本文链接：https://blog.csdn.net/qq_40561863/article/details/129863847

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

定位的目的：确定移动的具体位置。

定位在css中是一个非常重要的概念，主要是针对页面上的元素，进行指定位置排列方式

怎么设置CSS定位？

语法：

position:static;
static  静态定位
relative 相对定位
absolute  绝对定位
fixed      固定定位

设置静态定位 static（了解）

默认每个元素都是static定位，参考标准文档流

标准文档流：在页面布局过程中，元素默认按照从上到下，从左到右，块级元素独占一行，行级元素共享一行的排列规范。

设置相对定位（重点）

概念：参考移动之前的位置，按照你指定的方向进行移动
语法：
```
position:relative;
```
定义偏移量：
- top：设置元素距离上边框的偏移量
- left：距离左边的偏移量
- right：距离右边的偏移量
- bottom：距离下边的偏移量
特点：
- 设置元素的相对定位后，元素不会脱离文档流，只是破坏文档流
  - 什么是破坏文档流？
    - 元素在页面布局过程中，元素移动时不遵循标准文档流的规范，移动完成后会回到标准文档流里。只是在移动过程中会破坏文档流的规范。
- 只给元素设置相对定位，对元素本身是不会有影响，除非设置偏移量，元素才会发生移动
- 元素一旦设置了偏移量，会按照指定的方向进行移动，移动过程中不遵循标准文档流，移动完成后还在标准文档流里面。
- 移动过程是参考原来的位置进行移动
- 原来的位置依然保留，不会消失（原来的空间还在）
注意：
- 子元素相对定位后，父元素进行移动，子元素会跟着移动（子元素原来的位置跟着父元素一起移动）
- 相对定位一般不会单独使用，也不会单独用来布局，通常配合绝对定位来使用

设置绝对定位（重点）

概念：元素会脱离文档流，按照你设置的方向进行移动
语法：
```
position:absolute;
```
偏移量
- top：距离参考位置的上边缘的距离
- bottom：距离参考位置下边的距离
- left：距离左边的偏移
- right：距离右边的偏移

绝对定位特点：

会脱离文档流，原来的位置不存在
绝对定位前面的标准文档流里面的元素是不会受影响。
一旦设置了绝对定位，后面绝对定位的元素会盖住前面绝对定位的元素（后面绝对定位元素的层级更高）
绝对定位设置偏移量后，是参考整个文档进行移动
行级元素也可以设置绝对定位，一旦设置了默认支持宽高

注意：通常需要配合相对定位使用

定位父级

为什么设置定位父级？

因为绝对定位默认是参考文档进行移动，无法满足定位需求。

怎么设置定位父级？

子绝父相

只需要找到结构父级或者定位父级设置一个相对定位即可，当然设置固定定位和绝对定位也是可以的。因为相对定位不会影响其他元素的排列，并且相对定位盒子本身不会脱离文档流

结构父级：盒子在html代码结构中的父元素

定位父级：作为参考位置的父级称为定位父级。父级可以是结构父级，也可以是结构父级的父级。

  <style>
  	 .box2{
        width: 400px;
        height: 400px;
        background-color: green;
        /* 设置定位参考位置 
        position: fixed  absolute  relative;
        */
        position: relative;
      
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: tomato;
        position: absolute;
        right: 0;
        bottom: 0;
    
    }
  </style>
  
  <!-- 定位父级 -->
    <div class="box1">
        <!-- 结构父级 -->
        <div class="box2">
            <div class="box3">3</div>
        </div>
    </div>

定位层级

设置元素的层级关系，只针对于定位元素（相对定位，固定定位，绝对定位）有效
语法：
```
z-index:数字;
```
- 注意：默认为0 ，值越大，层级越高，可以设置负值,不能是小数
- 如果没有设置z-index，按照代码结构，后面的元素盖住前面元素，后面定位的元素层级更高

固定定位 (重点)

固定在屏幕上，脱离文档流，按照指定的方向进行移动
语法：
```
position:fixed;
left
right
top
bottom
```
特点：
- 脱离文档流，原来的空间不存在
- 设置偏移量后，是参考整个文档进行移动
- 固定定位不能设置定位父级
应用场景：头部导航。广告，提示框等等。

粘性（sticky ）定位（拓展）

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈（yu 界限门坎）值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>粘性定位</title> 
<style>
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

定位元素宽度

绝对定位元素的width设置100%默认是参考文档的宽度

没有定位父级，100%参考文档的宽度
有定位父级，100%参考定位父级的宽度

没有设置定位的元素，100%参考结构父级的宽度

扩展知识：

盒子居中技巧

margin:auto auto：可以让元素水平居中，但垂直方向无法居中，auto是一个值，浏览器自动计算剩余空间再均分。

网页在垂直方向上高度变化很大，内容不一样，高度就不一样，所以垂直方向上auto被禁用。

方案一：通过margin自动计算

居中盒子上设置绝对定位，使用四个方向都为0，再配合margin:auto auto;;参考的盒子可以设为定位父级。

居中盒子相对于定位父级进行水平垂直居中，通过margin自动计算再均分

 <style>
       .box1{
           width: 500px;
           height: 500px;
           background-color: blue;
           /*定位父级*/
           position: relative;
       }
       .box2{
            width:100px;
           height: 100px;
           background-color: aqua; 
           /* 设置绝对定位 */
           position: absolute;
           /*设置偏移量来确定它的活动范围  */
           top:0;
           right: 0;
           bottom: 0;
           left:0;
           margin: auto auto;
       }
   </style>
   <div class="box1">
        <div class="box2"></div>
    </div>

方法二：借助calc函数进行元素

局限性：父盒子必须是正方形，因为margin设置百分比是参考父盒子的宽度。

margin-top: 大盒子的高度的一半，减小小盒子高度的一半

margin-left：大盒子宽度的一半，减去小盒子宽度的一半

注意：借助calc配合marign使盒子居中，需要父盒子的宽度和高度一致，才有效。否则不能使用。并且calc函数还有兼容性问题

/* 借助calc函数自动计算，可以进行加减乘除的运算 */
/* calc函数的符号前后需要空格隔开 */
margin-top: calc(50% - 小盒子高度的一半);
margin-left: calc(50% - 小盒子宽度的一半);

注意：margin和padding设置百分比时，是参考父盒子的宽度。无论哪个方向都是参考宽度。

方案三：使用绝对定位，配合marign可以实现

绝对定位使用top：50%，left：50%，然后设置margin-top为小盒子高度的一半（负值），margin-left为小盒子宽度的一半（负值）

好处：兼容性比较好

坏处：margin-top和margin-left需要自己计算

  <style>
       .box1{
           width: 900px;
           height: 400px;
           background-color: yellow;
           /* 设置定位父级 */
           position: relative;
       }
       .box2{
            width:300px;
           height: 100px;
           background-color:green;
           position: absolute;
           top:50%;
           left:50%;
           margin-top: -50px;
           margin-left: -150px;
 
       }
   </style>
	<div class="box1">
        <div class="box2"></div>
    </div>