石家庄人才网今天给大家分享《css position absolute relative》，石家庄人才网小编对内容进行了深度展开编辑，希望通过本文能为您带来解惑。

CSS 中的 position 属性用于指定一个元素在文档中的定位方式。常用的定位方式有：static、relative、absolute、fixed 和 sticky。本文将重点介绍 absolute 和 relative 定位。

relative（相对定位）

相对定位的元素相对于其正常位置进行定位。这意味着元素会偏移其在正常文档流中的位置，但不会影响其他元素的布局。设置了 relative 定位的元素可以通过 top、right、bottom 和 left 属性来指定偏移量。

absolute（绝对定位）

绝对定位的元素相对于其最近的非 static 定位祖先元素进行定位。如果元素没有已定位的祖先元素，则相对于文档根元素（通常是元素）进行定位。与相对定位不同，绝对定位的元素会脱离文档流，不会占据空间，也不会影响其他元素的布局。同样，可以使用 top、right、bottom 和 left 属性来指定偏移量。

absolute 和 relative 的关系

absolute 和 relative 定位经常一起使用。将一个元素设置为 relative 定位，可以为其后代元素创建一个定位上下文。这意味着，如果后代元素设置为 absolute 定位，则会相对于这个祖先元素进行定位，而不是相对于文档根元素。石家庄人才网小编认为，这为创建复杂的页面布局提供了很大的灵活性。

示例

下面是一个简单的示例，演示了如何使用 absolute 和 relative 定位来创建一个简单的布局：

<div class="container">  <div class="child relative">    相对定位元素    <div class="grandchild absolute">绝对定位元素</div>  </div></div>
<style>.container {  width: 300px;  height: 200px;  border: 1px solid black;}
.relative {  position: relative;  top: 20px;  left: 30px;}
.absolute {  position: absolute;  top: 10px;  right: 10px;  background-color: yellow;}</style>

在这个示例中，.container 元素是一个容器，.child 元素设置为 relative 定位，.grandchild 元素设置为 absolute 定位。.grandchild 元素相对于 .child 元素进行定位，而不是相对于 .container 元素或文档根元素。石家庄人才网小编提醒，这使得 .grandchild 元素可以相对于 .child 元素进行精确的定位，而不会影响其他元素的布局。

石家庄人才网小编对《css position absolute relative》内容分享到这里，如果有相关疑问请在本站留言。