如何抑制位置：使用翻译时相对

Question

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

有没有办法抑制这种情况？

这是一个例子on codepen.io。

我想将白盒绝对定位到绿色的，而不是父（红色）的。

Answer 1

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

将您的 #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/

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

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

一种选择是通过在#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;
}