时间戳

首页 > 解决方案 > 如何使子固定DIV相对于父固定div？

html - 如何使子固定DIV相对于父固定div？

问题描述

我有以下 HTML：

<div class="parent">
  <div class="child"></div>
</div>

他们的CSS如下：

.parent {
  position: fixed;
}
.child {
  position: fixed;
  left: calc(100% - 10%);
}

由于父母和孩子都有固定的位置，有没有办法让孩子相对于父母？

最初，我想拥有这个：

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: calc(100% - 10%);
}

但是，这里的父级是一个始终固定在每个页面顶部的标题。因此，我无法将其更改为相对。但是，如果我愿意，我可以将孩子从固定更改为绝对，但这不是问题。我希望孩子相对于父母，以便默认情况下样式对所有屏幕尺寸都具有更高的准确性。有什么解决方法吗？

标签： htmlcssbootstrap-4

解决方案

我想你已经回答了你自己的问题 - 但这里有一个片段来证明，如果你将孩子相对于其固定定位的父母定位它是有效的。

.parent {
  position: fixed;
  width: 100%;
  height: 20vh;
  top: 10vh; /* just to prove child is positioned relative to parent not to body */
  background-color: lime;
}

.child {
  position: absolute;
  left: calc(100% - 10%);
  width: 50%;
  height: 10vh;
  background-color: cyan;
}
<div class="parent">
  <div class="child"></div>
</div>

推荐阅读