绝对定位：为什么我的盒子偏移了？

Question

这似乎是一个相当基本的问题，但我只是想弄清楚一些。

上下文：

我正在开发一个相当复杂的网站，我的一个展示想法包括一系列可以在屏幕上生成的框。由于太复杂而无法在这里解释的原因，我决定组织这些框的最佳方式是通过我的 HTML 中的父子结构。这是因为将子 div 的位置值设置为 100% 远离（顶部、左侧、右侧、底部）是方框镶嵌而不重叠的好方法。

这是我的HTML：

.box-1,
.box-2,
.box-3,
.box-4 {
    display: flex;
    border: solid black;
    justify-content: center;
    align-items: center;
}

.box-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border: solid rgb(72, 255, 72);
    border-width: 3px;
}

.box-2 {
    position: absolute;
    top: 0%;
    left: 100%;
    width: 150px;
    height: 150px;
    border: solid rgb(255, 72, 72);
    border-width: 3px;
}

.box-3 {
    position: absolute;
    top: 0%;
    left: 100%;
    width: 150px;
    height: 150px;
    border: solid rgb(218, 255, 56);
    border-width: 3px;
}

.box-4 {
    position: absolute;
    top: 0%;
    left: 100%;
    width: 150px;
    height: 150px;
    border: solid rgb(112, 86, 255);
    border-width: 3px;
}

<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="content-type" content "text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="box-1">
    box1
    <div class="box-2">
      box2
      <div class="box-3">
        box3
        <div class="box-4">
          box4
        </div>
      </div>
    </div>
  </div>

</body>


</html>

有谁知道为什么我的每个框都在最高值中偏移？可能与边距有关吗？

这是我正在谈论的 img：

enter image description here

Answer 1

原因是因为top: 0%。如果你删除它，它会并排对齐。原因是因为 top 属性将元素的上边缘设置为从其父容器的上边缘向下 0%。父容器有一个位于自身外部的边框，这就是为什么它看起来有层叠效果。边框的底部是元素的上边缘。

https://www.w3schools.com/cssref/pr_pos_top.asp

绝对定位：为什么我的盒子偏移了？

Absolute positioning: why are my boxes offset?

html

css

css-position

absolute

web