HTML / CSS在分屏设计中元素的绝对位置

Question

我正在尝试将光盘放置在页面中间，并与左右div重叠。我发现这样做的方法是使用以下代码，但是，当我这样做时，光盘会从页面的右侧弹出。请有人可以帮助我了解为什么我搜索和观看YouTube视频的原因，他们说这就是您的操作方式。它甚至可以在YouTube视频中播放，但不适用于我。我真的被困住了。

body {
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
}

.left {
  width: 50vw;
  display: relative;
  background-color: #abc;
}

.right {
  width: 50vw;
  background-color: #687;
}

.disc {
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 50%;
  right: -8em;
  transform: translateY(-50%);
}

<div class="container">
  <div class="left">
    <div class="disc"></div>
  </div>
  <div class="right"></div>
</div>

Answer 1

如果我理解正确，则希望将光盘放置在水平居中位置。

如果是这种情况，您可以将right属性与CSS calc函数结合使用以获得所需的行为，如下所示：

...
.disc {
    ...
    right: calc(50vw - 8em);
    ...  
}
...

vw代表视口宽度，8em是光盘宽度的一半。

您可以看到完整的代码here。

Answer 2

要放置子元素，父元素需要具有位置属性（position：relative; atleast），以使其子元素继承。这就是您的.disc元素移到右侧的原因。

因此只需添加

position: relative;

到父元素，.left和.right类

我希望这会有所帮助