美文网首页
绝对定位 absolute

绝对定位 absolute

作者: 乔布斯瞧不起 | 来源:发表于2023-06-04 08:37 被阅读0次

绝对定位(absolute)是CSS定位的一种方式。

当一个元素的position设置为absolute时:

  1. 元素会被移出正常文档流,不再占据原先的空间。
  2. 元素的位置相对于离元素最近的已定位的父元素。如果无已定位的父元素,则相对于<html>。
  3. 可以使用offset属性(top、right、bottom、left)来定义偏移量。
  4. 绝对定位也会创建一个新的堆叠上下文。其他元素不会占据它的堆叠上下文。
  5. 特点是相对于参考父元素定位,完全移出文档流。

示例:

html
<div class="outer">
  <div class="static">static div</div>
  <div class="relative">
    <div class="absolute">absolute div</div>
  </div>
</div>
css
.outer {
  position: relative;  
}
.static {
  position: static;
  background: #ff0;
}
.relative {
  position: relative; 
  background: #f0f; 
}
.absolute {
  position: absolute;
  top: 20px;
  right: 0;
  background: #0ff;  
}

结果:
static div
relative div
absolute div
.absolute元素相对与离它最近的已定位父元素.relative进行定位,所以位于其内部,向下偏移20px。
绝对定位的应用场景:

  1. 用来实现元素的精确定位。通过调整top、right、bottom、left可以放置在任意位置。
  2. 常用于实现子元素的居中定位。设置父元素相对定位,子元素绝对定位并设置四个方向的值为0,可以完成居中效果。
  3. 用于创建重叠的元素效果。绝对定位的元素会脱离文档流,可以重叠在其他元素之上。
  4. 配合z-index控制堆叠顺序,实现各种悬浮和凸显的效果。
    绝对定位是一个比较强大的定位手段,但由于它会完全脱离文档流,所以使用时需要注意:
  5. 若无已定位的父元素,会相对于<html>定位,导致潜在兼容问题。
  6. 其他元素会占据它原先的空间,可能影响布局。
  7. 绝对定位的元素是相对于参考父元素的内边框进行定位的。
  8. 要配合overflow等属性避免绝对定位的元素超出父元素范围。

所以,熟练掌握绝对定位,需要了解其定位特性,并注意其潜在的影响与问题。只有在理解其工作机理的前提下,才能自由运用,完成各种定位与覆盖的需求。绝对定位是一个强大而富于挑战的定位手段。

相关文章

  • 遮罩效果--首页公告

    position:absolute;绝对定位 position:absolute;(表示绝对定位),这条语句的作用...

  • css div 重叠

    position: absolute;用绝对定位。

  • 绝对定位absolute

    absolute包裹性float是个带有方位的display:inline-block属性,absolute也是个...

  • css第五节

    position定位 absolute:绝对定位 static:自动定位 relative:相对定位 fixed:...

  • day06

    1定位 相对定位relation 绝对定位absolute 相对定位就是元素在页面上的正常位置 2绝对定位 绝对定...

  • position 有4种,分别对应效果和用法

    1:relative相对定位,经常配合absolute来实现垂直居中; 2:absolute 绝对定位(脱离文档流...

  • HTML

    定位 属性:position 取值:relatire 相对定位 absolute 绝对定位 fi...

  • 20.css 绝对定位

    当position设置为absolute时,则开启绝对定位 绝对定位: 开启绝对定位,会使元素脱离文档流 开启绝对...

  • 定位流

    定位流分类 相对定位->relative 绝对定位->absolute 固定定位->fix...

  • 绝对定位与相对定位的比较

    一:绝对定位 position: absolute; 绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即设置...

网友评论

      本文标题:绝对定位 absolute

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