立场：绝对没有做我所期望的

Question

我在掌握position: absolute

时遇到问题

我了解它根据其相对父对象的位置来定位自己。那么我的例子有什么问题呢？当单击第一个“ .col-lg-6”时，为什么褪色的蓝线不在右列上居中？

请您重新编写代码并解释为什么会发生这种情况吗？

.formWrapper
{
    background: blue;
    height: 100vh;
    position: relative;
    margin: 0;
}

.formWrapper .contactForm
{
    width: 750px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: yellow;
}

    <div class="formWrapper">
        <div class="contactForm row">
            <div class="col-lg-6"><h1>HI</h1></div>
            <div class="col-lg-6"><h1>HI</h1></div>
        </div>
    </div>

Answer 1

我无法重新编写代码并提供所需的确切信息，因为我看不到您在说的淡蓝色线。但是，正如我所见，我将解释您的代码发生了什么。

---

HTML标记

 <div class="formWrapper">
     <div class="contactForm row">
         <div class="col-lg-6"><h1>HI</h1></div>
         <div class="col-lg-6"><h1>HI</h1></div>
     </div>
 </div>

---

.formWrapper
{
    background: blue;
    height: 100vh;
    position: relative;
    margin: 0;
}

您有一个.formWrapper div蓝色。它占据了整个屏幕，并且您已将其相对放置。相对定位将其子元素定义为绝对（必要）位置时可以使用它的子元素。

.formWrapper .contactForm
{
    width: 750px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: yellow;
}

您已经定义了黄色.contactForm div的固定宽度和高度，并将其着色为黄色。

通过使用position: absolute和top:50%定义left:50%，.contactForm div的左上位置将出现在.formWrapper div的中间。但是，您还添加了transform: translate(-50%, -50%)样式，可将.contactForm div向左移动其自身宽度的50％，并向其自身高度的50％向上移动。

重要

您在position: absolute元素的父级中设置的div.col-lg-6样式不会影响子元素在该元素中的位置。绝对位置绝对值仅直接影响应用此样式的实际元素，更改其位置以引用其自身的父对象或已定义位置样式的最接近的父元素。

位置固定

如果您的目标是使弹出窗口位于屏幕中央，则您可能需要使用position: fixed，它将元素相对于窗口放置。这样，您不必担心其他元素的影响。

您可以将弹出窗口放置在视图的中间，就像将.contactForm div放置在其父div的中间一样。

引导程序

如果您正在使用引导程序或任何其他CSS框架，则可能需要查阅其文档以了解如何实现目标。通常，在使用CSS框架时，添加自己的自定义样式来影响元素的大小和位置可能会导致难以管理的后果。

通过设置绝对或固定位置，可能会破坏其余CSS的预期流。因此，只有在没有标准方法来做所需的事情并且知道后果时才这样做。