CSS定位

coolke
125 阅读3分钟

引言

  • 布局是屏幕平面上的，定位是垂直于屏幕的。
  • background（背景）的范围：border外边沿围成的区域。
  • 一个div的分层： 1659692545335.png 1659692571995.png
  • 脱离文档流：元素脱离正常元素的布局排版规则，其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。其实就是元素浮起来了一点点成了浮动元素。

position属性

  • position：static ： 默认值（待在文档流里面）
  • position：relative : 相对定位（升起来，但是不脱离文档流；占的位置不变，只是在别处显示）
  • position：absolute : 绝对定位（定位基准是祖先里的非 static ）
  • position：fixed : 固定定位（定位基准是viewport）
  • position：sticky: 粘滞定位
  • 经验：
    • 如果写了 absolute ，一般都会补一个 relative 。（针对于谁，就在谁上加 relative ）
    • 如果写了 absolute 或 fixed，一般都要补一个 top 和 left 。
    • white-space:nowrap;文字内容不准换行

position：static

  • 使用场景:
    • 做位移
    • 给absolute元素做爸爸
  • 配合 z-index
    • z-index:auto 默认值，不创建新的层叠上下文。（数值默认是0，元素都写auto时后写的覆盖前写的）
    • z-index: -1 | 0 | 1 | ... 会创建新的层叠上下文。（大的数值会覆盖小的数值）
    • 注意：
      • 1.不要写z-index:9999
      • 2.z-index:auto 与z-index:0 是不一样的。前者不创建新的层叠上下文，后者会创建新的层叠上下文

position：relative

  • 使用场景:
    • 脱离原来的位置，另起一层（eg：对话框的关闭按钮）
    • 鼠标提示
  • 配合 z-index
  • 经验：
    • 1.absolute不是相对于relative定位的，准确的说是相对于祖先元素中第一个不是 static 的元素而定位的
    • 2.有些浏览器不写top / left会发生位置错乱，但是top / left / reight / bottom 四个任写两个就不会错乱
    • 想让元素处于最右端：left:100%
    • 居中写法：left:50% + transform:translateX(-50%);
    • 使鼠标提示隐藏，当指针悬浮时显示的方法：
button span{
  display:none;
}

button:hover span{
  display:inline-block;
}
  • 小例子：使鼠标提示隐藏，当指针悬浮时显示 1659698346110.png

（显示效果）：

1659698431596.png 1659698546288.png

（代码链接）：js.jirengu.com/zadenumita/…

position：fixed

  • 相对于“视口”定位的
  • 使用场景:
    • 广告
    • 回到顶部按钮
  • 配合 z-index
  • 经验：
    • 手机尽量不要使用这个属性，坑多
    • 不要将含有position:fixed的元素放到含有 transform 属性的元素里面，有BUG

position：sticky

  • 使用场景：当元素需要固定显示的时候。（即：向下滑动页面，当含有sticky的元素到达页面顶部的时候会粘在顶部不动）
  • 兼容性差

层叠上下文

  • 每个层叠上下文都是一个作用域，在这个作用域里的z-index与外界无关；处于同一作用域的z-index才能比较。 1659712541345.png
  • 可以创建层叠上下文的不正交的属性：
    • z-index | flex | opacity（半透明） | transform | ...
    • 查阅文档 “层叠上下文 MDN”
  • 负的z-index是逃不出层叠上下文的作用域的
注：
opacity:0.5 和 background:rgba(255,0,0,0.5)的区别

opacity是元素内所有内容都变透明
background只影响背景色

「资料来源：饥人谷」
avatar
文章
阅读
粉丝