html - 如何CSS绝对定位正确的方式

Question

我弄乱了 CSS 位置，有人可以帮助我。我需要从 document (window) 中移出屏幕子 div，为 x-wrap 元素添加一些边距。

当我添加 margin-right 时， child 总是在文档的右侧。请查看我下面的屏幕截图。

HTML

<div class="x-wrap">
    <div class="x">
        <div class="child"></div>
    </div>
</div>

CSS

.x-wrap{
    margin-right: 8800px;
}
.x{
    width: 800px;
    height: 50px;
    position: relative;
    z-index: 2;
    background: #cdcdcd;
    margin: 0 auto;
}
.child{
    position: absolute;
    width: 100px;
    height:100px;
    top: 0;
    left: 0;
    background: blue;
}

当我在 x-wrap 中添加减号 margin-left 时。它正在唤醒我所需要的。蓝色子框被移出屏幕。

.x-wrap{
    margin-left: -800px;
}

============================================= ==========================

我真的需要知道原因。非常感谢!

============================================= ==========================

Answer 1

所以，你想知道发生了什么，是吗？

绝对 定位将元素“置于”具有相对 位置的父元素之上。

所以，像这样放置你的方 block :

+-----+-----------------------+
|XXXXX|                       |
|XXXXX|                       | <--- parent element with relative positioning
|XXXXX+-----------------------+
+-----+
   \
    \
     --- child element with absolute positioning

当您声明一个绝对子级时，默认情况下它会自动将其左上角与其相对父级的左上角对齐。

---

因此，在您的 css 中，您使用以下方式重新强制执行此操作(以防您的 anchor 位置不同/等等):

left:0;
top:0;

---

那么让我们看看更大的图景:

       +---------------------------------------------------+
       |                                                   |
       |+-----+-----------------------+                    |
       ||XXXXX|                       |                    |
       ||XXXXX|                       |                    |
       ||XXXXX+-----------------------+                    |
       |+-----+                                            |
       |<200px>                                            |
       |                                                   |<-- screen
       |                                                   |
       |                                                   |
       |                                                   |
       +---------------------------------------------------+

由于将 ma​​rgins 设置为 0(以及内边距)，这意味着您的 div 将与屏幕的一侧对齐，如上所示。

---

通过在父级上设置 200px 的负左边距，这意味着我们的父级向左“移动”(因此离开屏幕):

       +---------------------------------------------------+
       |                                                   |
 +-----+-----------------------+                           |
 |XXXXX|                       |                           |
 |XXXXX|                       |                           |
 |XXXXX+-----------------------+                           |
 +-----+             <-- parent is pushed to left using    |
       |                 a left margin of -200px           |
       |                                                   |<-- screen
       |                                                   |
       |                                                   |
       |                                                   |
       +---------------------------------------------------+

你已经明白了:希望你现在可以明白为什么这个子 div(当它的相对父 div 被赋予负边距时)为什么它没有出现在屏幕上。

---

此外，设置任何

left:0;
right:0;
top:0;
bottom:0;

在任何绝对定位的元素上都会将其对齐到相对父元素的“边/边”的“边/边”

---

• Follow up reading

---