相对于变换后元素的绝对位置 [英] Absolutely positioned element positions relatively to transformed element
问题描述
我重新创建了模板中遇到的问题。
有一个导航，其位置为：相对； 。 导航内部有一个 div ，其中嵌套了两个列表。
其中一个列表的位置绝对要紧贴的底部导航。
当 div 应用了转换时，就会发生此问题。
当绝对位置和相对位置的元素之间的 div 获得转换属性，绝对列表相对于 div 而不是 nav 定位。
I recreated an issue that I am encountering in a template.
There is a nav that has position: relative;. Inside the nav there is a div with two lists nested.
One of the lists is position absolutely to stick to the bottom of the nav.
The problem occurs when the div has a transformation applied to it.
When the div in between the absolutely and relatively positioned elements get's a transform property, the absolute list positions itself relatively to the div instead of the nav.
不要为元素留出空间。而是将其定位在相对于其最接近的祖先的
指定位置（如果有的话），相对于包含块的
或其他位置。绝对定位的
盒子可以有边距，并且不会与其他
边距合拢。
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
表示转换后的元素是定位元素？
为什么这样做？我在Edge，FF和Chrome中进行了测试。它们的行为都相同。
Does this mean a transformed element is a positioned element? Why does it do this? I tested in Edge, FF, and Chrome. They all act the same.
您可以在下面运行重新创建的代码段。我正在将鼠标悬停在div上的div上。
You can run the recreated snippet below. I am applying the transform on the div on hover of the nav.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
min-height: 100%;
height: 100%;
}
nav{
background: #000;
height: 100%;
width: 50%;
position: relative;
}
nav:hover > div{
transform: translateX(50px) translateY(0) translateZ(0);
}
a{
color: #fff;
}
ul{
padding: 16px;
}
ul.main{
background: blue;
}
ul.lower{
position: absolute;
background: red;
bottom: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav>
<div>
<ul class="main">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
<ul class="lower">
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</div>
</nav>
</body>
</html>
推荐答案
基本上是因为任何应用了transform属性的元素都会自动触发新的堆叠顺序： https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
Basically because any element with the transform property applied, automatically triggers a new stacking order: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
如果该属性的值等于零，则将创建一个堆栈上下文。在这种情况下，该对象将充当位置的包含块：其中包含的固定元素。
"If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains."
以下是有关堆栈上下文的一些额外信息： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
Here is some extra info about stacking context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
这篇关于相对于变换后元素的绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
