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

Question

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

有没有办法抑制这个？

这是一个例子on codepen.io。

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

Answer 1

一个选项是 displace/negate 父级的定位，方法是在 #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) Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

所以在你的情况下，最近的祖先将永远是 #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.

这是一篇有趣的读物，证实了 "transforming an element force-adds position: relative."：http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

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

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

How to suspress the position: relative when using translate

css

css-position

transform