美文网首页
定位元素

定位元素

作者: SeanLink | 来源:发表于2024-02-29 18:58 被阅读0次

    CSS定位元素

    标准流(Normal Flow)

    ◼ 默认情况下,元素都是按照normal flow(标准流、常规流、正常流、文档流【document flow】)进行排布

    18cb517e10d.png

    margin-padding位置调整

    ◼ 在标准流中,可以使用margin、padding对元素进行定位

    • 其中margin还可以设置负数

    ◼ 比较明显的缺点是

    • 设置一个元素的margin或者padding,通常会影响到标准流中其他元素的定位效果
    • 不便于实现元素层叠的效果

    ◼ 如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?

    • 我们可以通过position属性来进行设置;

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

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

    position属性

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

    static | relative | abslute | sticky | fixed

    默认值: static 静态定位

    ◼ 使用下面的值, 可以让元素变成 定位元素(positioned element)

    • relative:相对定位
    • absolute:绝对定位
    • fixed:固定定位
    • sticky:粘性定位

    静态定位 - static

    ◼ position属性的默认值

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

    相对定位 - relative

    ◼ 元素按照normal flow布局
    ◼ 可以通过left、right、top、bottom进行定位

    • 定位参照对象是元素自己原来的位置

    ◼ left、right、top、bottom用来设置元素的具体位置,对元素的作用如下图所示

    18cb5221c8f.png

    ◼ 相对定位的应用场景

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

    固定定位 - fixed

    ◼ 元素脱离normal flow(脱离标准流、脱标)
    ◼ 可以通过left、right、top、bottom进行定位
    ◼ 定位参照对象是视口(viewport)
    ◼ 当画布滚动时,固定不动

    画布 和 视口

    18cb5239a7c.png

    ◼ 视口(Viewport)

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

    ◼ 画布(Canvas)

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

    ◼ 宽高对比

    • 画布 >= 视口

    绝对定位 - absolute

    ◼ 元素脱离normal flow(脱离标准流、脱标)

    ◼ 可以通过left、right、top、bottom进行定位

    • 定位参照对象是最邻近的定位祖先元素
    • 如果找不到这样的祖先元素,参照对象是视口

    ◼ 定位元素(positioned element)

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

    子绝父相

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

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

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

    将position设置为absolute/fixed元素的特点

    1. 可以随意设置宽高
    2. 宽高默认由内容决定
    3. 不再受标准流的约束
      • 不再严格按照从上到下、从左到右排布
      • 不再严格区分块级(block)、行内级(inline),行内块级(inline-block)的很多特性都会消失
    4. 不再给父元素汇报宽高数据
    5. 脱标元素内部默认还是按照标准流布局
    • 绝对定位元素(absolutely positioned element)
      • position值为absolute或者fixed的元素
    1. 对于绝对定位元素来说
      • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
      • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
    2. 如果希望绝对定位元素的宽高和定位参照对象一样,可以给绝对定位元素设置以下属性
      • left: 0、right: 0、top: 0、bottom: 0、margin:0
    3. 如果希望绝对定位元素在定位参照对象中居中显示,可以给绝对定位元素设置以下属性
      • left: 0、right: 0、top: 0、bottom: 0、margin: auto
      • 另外,还得设置具体的宽高值(宽高小于定位参照对象的宽高)

    auto到底是什么?

    • 800 = 200 + ml0 + mr0 + 0 + 0
    • auto -> 交给浏览器你来出来
    • width: auto;
    • 1.行内非替换元素 -> width: 包裹内容
    • 2.块级元素 ->width: 包含块的宽度
    • 3.绝对定位元素 -> width: 包裹内容

    粘性定位 - sticky

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

    • sticky是一个大家期待已久的属性;
    • 可以看做是相对定位和固定(绝对)定位的结合体;
    • 它允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点;
    • 当达到这个阈值点时, 就会变成固定(绝对)定位;![] 18cb52ba3be.png

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

    position值对比

    18cb52bedf1.png

    CSS属性 - z-index

    ◼ z-index属性用来设置定位元素的层叠顺序(仅对定位元素有效)

    • 取值可以是正整数、负整数、0

    ◼ 比较原则

    • 如果是兄弟关系
      ✓ z-index越大,层叠在越上面
      ✓ z-index相等,写在后面的那个元素层叠在上面
    • 如果不是兄弟关系
      ✓ 各自从元素自己以及祖先元素中,找出最邻近的2个定位元素进行比较
      ✓ 而且这2个定位元素必须有设置z-index的具体数值
      18cb52d07e2.png

    相关文章

      网友评论

          本文标题:定位元素

          本文链接:https://www.haomeiwen.com/subject/xohjndtx.html