How to suspress the position: relative when using translate

it seems that using transform: translateY(1px); also causes the element to gain an extra position: relative; -behaviour.

Is there a way to suspress this?

Here is a example on codepen.io.

I would like to position the whitebox absolutely to the green one, not the parent (red) one.

---

One option would be to displace/negate the parent's positioning by wrapping an element around #three (in this case, I added the .displacement element).

Absolutely position this wrapper element, and position it to cover the parent (using top: 0 / right: 0 / bottom: 0 / left: 0 ). Then displace the element by giving it negative translation values, relative to the parent's.

<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%;
}

In doing so, the element #three is positioned absolutely relative to #one , and the parent #two 's translated positioning is effectively displaced.

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;
}

---

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.

so in your case the closest ancestor will always be #two which doesn't inherit any position property , just default position: static; ...

---

if you gave #two position:relative// or absolute and positioned it with top: and left: maybe it's easier to place #three: http://codepen.io/maio/pen/qEMJpY

---

Here's a less-than-ideal workaround, but it works for your existing markup.

Change your #two CSS to a pseudo-element, adding these styles:

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

Updated CodePen

---

Short of changing your markup, your other solution is to use JavaScript to make three a child of element one :

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

However, it will no longer inherit any styles from element two , as demonstrated in this CodePen .

Here's an interesting read, which confirms "transforming an element force-adds position: relative.": http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

Not only that, but it also affects fixed-position elements, which doesn't make much sense.

链接地址: http://www.djcxy.com/p/25256.html

上一篇: 如何樱桃选择一系列的提交并合并到另一个分支

下一篇: 如何在使用翻译时支持相对位置：相对