Question

似乎使用transform: translateY(1px);也会导致元素获得额外的position: relative; - 行为。

有没有办法来阻止这个？

我想将白盒绝对放在绿色盒子上，而不是父盒子（红色）。

Answer 1

一种选择是通过在#three周围包裹一个元素来取代/否定父级的定位（在这种情况下，我添加了.displacement元素）。

绝对定位此包装器元素，并将其定位为覆盖父级（使用top: 0 / right: 0 / bottom: 0 / left: 0）。然后通过给出相对于父元素的负翻译值来替换元素。

<div class="displacement">
    <div id="three"></div>
</div>

.displacement {
  -webkit-transform: translateY(-25px) translateX(-25px);
  transform: translateY(-25px) translateX(-25px);
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 200%; height: 200%;
}

通过这样做，元素#three绝对相对定位到#one，并且父#two的翻译定位实际上已被替换。

Updated Example

.displacement {
  -webkit-transform: translateY(-25px) translateX(-25px);
  transform: translateY(-25px) translateX(-25px);
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 200%; height: 200%;
}
#three {
  background-color: white;
  height: 25px;
  width: 25px;
  position: absolute;
  left: 0;
  bottom: 0;
}

Answer 2

position:absolute (from moz)不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会随着任何其他边缘而崩溃。

所以在你的情况下，最近的祖先永远是#two，它不会继承任何位置属性，只是默认position: static; ...

如果您提供#two position:relative// or absolute并将其定位为top:和left:，则可能更容易放置#three： http://codepen.io/maio/pen/qEMJpY

Answer 3

这是一种不太理想的解决方法，但它适用于您现有的标记。

将#two CSS更改为伪元素，添加以下样式：

#two::before {
  content: '';
  display: block;
}

<强> Updated CodePen

<小时/> 如果没有更改标记，则另一种解决方案是使用JavaScript使three成为元素one的子项：

document.querySelector('#one').appendChild(document.querySelector('#three'));

但是，它将不再继承元素two中的任何样式，如下所示的 CodePen

这是一个有趣的读物，它确认了“转换元素强制 - 添加位置：相对。”：http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

不仅如此，它还影响固定位置元素，这没有多大意义。

如何压缩位置：使用translate时的相对位置

3 个答案: