CSS 定位

最新推荐文章于 2024-05-22 14:36:42 发布

niceffking

最新推荐文章于 2024-05-22 14:36:42 发布

阅读量844

点赞数 11

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

本文链接：https://blog.csdn.net/niceffking/article/details/138723409

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

为什么需要浮动?

我们在访问一些网站的时候, 经常会遇到如下这种情况, 有一个组件, 一直固定在屏幕的固定位置, 无论你如何滑动这个网页, 就会固定在哪里, 如下, 下图是王者荣耀的一个官网:
王者荣耀官网
要实现上面的效果, 标准流或者是浮动是无法快速实现的, 此时就需要使用定位来实现.
因此, 定位和浮动之间的一些区别如下 :

浮动可以让多个块级盒子在一行没有间隙的排列显示, 可以用于纵向排列的盒子
定位则是可以让盒子自由地在某个盒子内移动, 或者是固定屏幕中某个位置, 并且可以压住其他盒子.

定位的组成

定位: 将一个盒子固定在某个位置, 所以定位也是在摆盒子, 按照定位的方式移动盒子.
定位 = 定位模式 + 边偏移
定位模式: 用于指定一个元素在文档中定位的方式
边偏移: 决定了该元素的最终位置

定位模式

定位模式决定元素的定位方式, 通过css中的position属性来决定, 其值可以分为四个:

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

static

静态定位. 静态定位就是元素默认的定位方式, 也就是无定位.
语法:

选择器 {
	position: static; /*默认值, 无定位, 标准流*/
}

可以理解为:

静态定位就是标准流, 没有边偏移
静态定位在布局的时候很少用

relative

相对定位是元素在移动的时候, 是相对于它原来的位置来说的.
例如下面有一个盒子如下:
在这里插入图片描述
它丁顶着浏览器窗口的左上角, 现在给他设置position: relative.
想让他定位, 只有定位模式position还不够, 还需要边偏移:

div {
	postion: relative;
	top: 100px;
}

在这里插入图片描述
然后给他加上一个left 100px:

div {
	postion: relative;
	top: 100px;
	left: 100px;
}

其效果如下:
在这里插入图片描述
相对定位总是以自己原来的位置为基础来进行边偏移.

同时, 虽然这个盒子通过定位走了, 假如在文档中, 它下面还定义了一个div盒子, 那么浮动的盒子还是继续占有原来的位置, 继续以标准流的方式占有它.
在这里插入图片描述
总结:

人走了, 这个位置还是继续被相对定位的盒子占有
相对定位是相对自己原来在文档中的位置进行定位的.

absolute

绝对定位, 元素在移动的时候, 是相对于它祖先元素来定位的.
语法:

选择器 {
	position: absolute;
}

分为两种情况:

如果没有父元素, 或者是父元素没有定位, 则以浏览器定位为主

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .test {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 100px;
      left: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="test"></div>
</body>
</html>

在这里插入图片描述

如果存在父元素, 那么就以父元素为准. 但是需要注意的是, 父元素首先也需要进行定位. 不然该盒子还是以浏览器为准
给父盒子加了定位, 那么子盒子定位就会被限定在父盒子之内.
如果有多级父盒子 , 那么子盒子会一直往上一级一级的找, 如果找到了被定位的父级盒子, 那么就以这个父级盒子为准, 如果一直找到body, 都没有, 那么就以浏览器为标准.
绝对定位是脱离标准流的. 原来的盒子被绝对定位之后, 是不占用原来的标准流的.

子绝父相

子绝父相意思是, 子级使用绝对定位, 父级使用相对定位:

子绝：指的是子元素的position属性设置为absolute（绝对定位）。
父相：指的是父元素的position属性设置为relative（相对定位）或者absolute、fixed等非static值（但在这种场景下，通常指的是relative）。

为什么?

脱离文档流：当子元素设置为absolute时，它会脱离正常的文档流，这意味着它不会占据空间，不会影响其他元素的布局。也就是说, 子级使用绝对定位是不会影响兄弟或者父级盒子的.
相对于最近的已定位祖先元素定位：绝对定位的元素会相对于最近的已定位（即position属性值不是static）的祖先元素进行定位。如果没有这样的祖先元素，那么它会相对于初始包含块（通常是视口）进行定位。
灵活性和控制：通过使父元素为relative，我们可以为子元素的绝对定位提供一个相对稳定的参考点，从而更容易地控制子元素的位置。

例如:

<div class="parent">  
  <div class="child">  
    我是子元素  
  </div>  
</div>

.parent {  
  position: relative; /* 父元素设置为相对定位 */  
  width: 300px;  
  height: 200px;  
  border: 1px solid black;  
}  
  
.child {  
  position: absolute; /* 子元素设置为绝对定位 */  
  top: 50px;  
  left: 50px;  
  background-color: lightblue;  
}

固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。就例如我们上面给你看的那个王者荣耀官网的图片一样.
语法:

选择器 {
	position: fixed;
}

固定定位的特点:

以浏览器的可视窗口为参照点移动元素

跟父元素没有关系
不会随着滚动条滚动
可是窗口就是浏览器展示页面的窗口.

固定定位脱离标准流, 不占有原来的位置.

代码案例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .dh {
      position: fixed;
      top: 200px;
      left: 100px;
    }
    body {
      height: 3000px;
    }
  </style>
</head>
<body>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <h3>hello world</h3>
  <div class="dh">
    <img src="./images/pvp.png" alt="">
  </div>
</body>
</html>