元素的定位

最新推荐文章于 2024-09-12 10:14:05 发布

原创最新推荐文章于 2024-09-12 10:14:05 发布 · 702 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

前端学习小记专栏收录该内容

85 篇文章

订阅专栏

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为

例如放在另一个元素的上面
或者始终保持在浏览器视窗内的同一位置

定位在开发中非常常见
在这里插入图片描述

认识position属性

利用position可以对元素进行定位，常用取值有5个

static：默认值, 静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
sticky：粘性定位

静态定位 - static

position属性的默认值

元素按照normal flow布局
left 、right、top、bottom没有任何作用

相对定位 - relative

元素按照normal flow布局

可以通过left、right、top、bottom进行定位
定位参照对象是元素自己原来的位置

left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示
在这里插入图片描述
相对定位的应用场景

在不影响其他元素位置的前提下，对当前元素位置进行微调

固定定位 - fixed

元素脱离normal flow（脱离标准流、脱标）

可以通过left、right、top、bottom进行定位
定位参照对象是视口（viewport）
当画布滚动时，固定不动

画布和视口

视口（Viewport）

文档的可视区域
如图红框所示

画布（Canvas）

用于渲染文档的区域
文档内容超出视口范围，可以通过滚动查看
如图黑框所示

宽高对比

画布 >= 视口

定位元素的特点

特点

可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
✓ 不再严格按照从上到下、从左到右排布
✓ 不再严格区分块级、行内级，块级、行内级的很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部默认还是按照标准流布局.

绝对定位 - absolute

元素脱离normal flow（脱离标准流、脱标）

可以通过left、right、top、bottom进行定位
定位参照对象是最邻近的定位祖先元素
如果找不到这样的祖先元素，参照对象是视口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        background-color: #f00;

        position: relative;
      }

      .box {
        width: 200px;
        height: 200px;
        background-color: #0f0;

        position: absolute;
        right: 0;
        bottom: 0;
      }

      strong {
        position: absolute;
        left: 0;
        bottom: 0;
      }

      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <span>我是span元素</span>
        <strong>我是strong元素</strong>
        <img src="../images/gouwujie01.jpg" alt="" />
        <div>我是div元素</div>
      </div>
    </div>
  </body>
</html>

在这里插入图片描述

定位元素（positioned element）

position值不为static的元素
也就是position值为relative、absolute、fixed的元素

绝对定位元素（absolutely positioned element）

position值为absolute或者fixed的元素

对于绝对定位元素来说

定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性

left: 0、right: 0、top: 0、bottom: 0、margin:0

如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性

left: 0、right: 0、top: 0、bottom: 0、margin: auto
另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）

子绝父相

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位

如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是

父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
子元素设置position: absolute
简称为“子绝父相”

粘性定位 - sticky

另外还有一个定位的值是position: sticky，比起其他定位值要新一些

sticky是一个可以看做是相对定位和固定定位的结合体
它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点
当达到这个阈值点时, 就会变成固定定位`

sticky是相对于最近的滚动祖先包含视口的(the nearest ancestor scroll container’s scrollport )