Question

我对css位置感到困惑，可以帮助我一些人。我需要从文档（窗口）移出屏幕子div，向x-wrap元素添加一些边距。

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

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;
}

enter image description here

当我向margin-left添加减去x-wrap时。这是我所需要的。蓝色的儿童盒被移出屏幕。

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

enter image description here

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

我真的需要知道这一点。 非常感谢！

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

Answer 1

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

绝对定位将元素＆＃34;置于＆＃34;之上拥有相对职位的父母。

所以，把你的方块放在：

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

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

因此，在你的css中，你使用以下方法强制执行此操作（如果你的锚位置不同/等）：

left:0;
top:0;

让我们看一下大局：

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

由于将边距设置为0（以及填充），这意味着您的div将对齐到屏幕的一侧，如上所示。

通过在我们的父母上设置200px的负左边距，这意味着我们的父母会移动＆＃39;在左边（因此在屏幕外）：

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

所以，你有它：希望你现在可以看到为什么这个孩子div（当它的亲属被给予负余量时）为什么它没有在屏幕上看到。

此外，设置任何

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

在任何绝对定位的元素上的

将使其与该边/边缘对齐。相对父母的一方/边缘＆＃39;

的 Follow up reading

Answer 2

Margin-left移动隐藏的div左侧，margin-right将margin移至right，您将通过添加margin-right来了解element并element它会移动新的div权利

您还可以通过更改left值移动left absolute，left:0元素的默认属性为top:0 visibility:hidden

如果您确实要隐藏div，请使用opacity:0或display:none或{{1}}

Answer 3

margin-left会向左添加px＆＃（向右推动元素），margin-right会向右添加px＆＃39; s（将元素推向左侧）。 margin的要点是将元素推离其周围环境。因此，添加大量margin会将该元素推向您告诉它的任何方向。

由于您使用position: absolute您真正想要做的是使用left和right属性来移动元素。您甚至可以使用负像素将元素移出屏幕，例如left: -100px。

以下是我从margin移除.x-wrap并将left: -200px添加到.child的示例。如您所见，蓝框现已关闭：

FIDDLE

如何css绝对定位正确的方式

3 个答案: