HTML绝对位置的设置问题?

Question

我是刚学html的菜鸟。

我想设置绿色div相对红色div的绝对位置：

<div className="red-div-style4">
    <div className="green-div-style4"></div>
</div>

.red-div-style4 {
  background-color: red;
  width: 100px;
  height: 100px;
}

.green-div-style4 {
  background-color: green;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 20px;
  left: 5px;
  border-width: 3px;
  border-color: black;
  border-radius: 10px;
}

但是这个绿色div的位置竟然是相对整个屏幕的，如何设置相对红色div的绝对位置？

Answer 1

position: relative

.red-div-style4 {
    position: relative
}

---

在 CSS 中，position 属性用于控制元素的定位方式。position 属性有以下几个可能的取值：

• static: 默认值，元素遵循正常文档流，不进行特殊定位。

  • top、right、bottom、left 和 z-index 属性对 static 元素无效。

• relative:

  • 元素相对于其自身原来的位置进行定位。
  • 可以使用 top、right、bottom 和 left 属性来进行偏移。
  • 不会脱离文档流，影响其他元素的布局。

• absolute:

  • 元素相对于最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，相对于初始包含块。
  • 使用 top、right、bottom 和 left 属性来控制位置。
  • 脱离文档流，可能影响其他元素的布局。

• fixed:

  • 元素相对于视口（浏览器窗口）进行定位，不随页面滚动而移动。
  • 使用 top、right、bottom 和 left 属性来控制位置。

• sticky:

  • 元素根据用户的滚动位置进行定位，表现上类似于 relative 和 fixed 的结合。
  • 在跨越特定阈值前（比如容器顶部到达视口顶部），元素表现为 relative，之后则表现为 fixed。
  • 使用 top、right、bottom 和 left 属性来控制元素在 sticky 状态下的偏移。

每个 position 的取值都会影响元素的布局和定位方式，你可以根据需要选择合适的值来实现你想要的效果。

Answer 2

.red-div-style4 {
  background-color: red;
  width: 100px;
  height: 100px;
++position: relative;
}

.green-div-style4 {
  background-color: green;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 20px;
  left: 5px;
  border-width: 3px;
  border-color: black;
  border-radius: 10px;
}

absolute定位的基准是相对于最近一级的不是默认值static的父元素(可以是absolute/relative/fixed等)来进行定位的，而不仅仅是相对于为position为relative的父级元素。父级元素还可以是absolute、fixed定位

Answer 3

给红色div添加上position: relative;即可

.red-div-style4 {
  position: relative;
  background-color: red;
  width: 100px;
  height: 100px;
}