我重新创建了我在模板中遇到的问题。
有一个nav具有position: relative;。在 - 的里面nav有一个div有两个嵌套列表。
其中一个列表的位置绝对固定在列表的底部nav。
当div对其应用了变换。
当。。。的时候div在绝对和相对定位的元素之间有一个变换属性，绝对列表相对于div而不是nav.
MDN 文档对position:absolute 做了如下说明 https://developer.mozilla.org/en-US/docs/Web/CSS/position
不要为元素留出空间。相反，将其放置在
相对于其最接近的定位祖先的指定位置（如果有），
或以其他方式相对于包含块。绝对定位
盒子可以有边距，并且它们不会与任何其他盒子折叠
边距。
这是否意味着转换后的元素是定位元素？
为什么要这样做？我在 Edge、FF 和 Chrome 中进行了测试。他们的行为都一样。
您可以运行下面重新创建的代码片段。我正在将变换应用于导航悬停时的 div。
*{
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>
CSS 规范指出定义一个transform在一个元素上创建一个包含块 https://www.w3.org/TR/css-transforms-1/#transform-rendering:
对于其布局由 CSS 盒模型控制的元素，除了 none 之外的任何转换值都会导致创建堆叠上下文和包含块。
然后 （see spec https://www.w3.org/TR/css-position-3/#abs-pos):
在绝对定位模型中，盒子相对于其包含块显式偏移。
The key here is that setting the
transform property of an element to anything other thant
none, creates a new
containing block;
stacking contexts have nothing to do with the way the element is positioned.
请参阅以下代码片段中的示例。
body {
padding-top: 100px;
}
.containing-block,
.stacking-context {
height: 50px;
padding-top: 50px;
}
.containing-block {
background-color: hotpink;
/* transform with a value other than none defines both a containing block and a stacking context. */
transform: scale(1);
}
.stacking-context {
background-color: orange;
/* opacity with a value other than 1 defines a stacking context but no containing block. */
opacity: .99;
}
.abs{
position: absolute;
top: 0;
padding: 10px;
background-color: dodgerblue;
}
<body>
<div class="containing-block">1: transform: scale(1);
<div class="abs">1: Containing block example</div>
</div>
<div class="stacking-context">2: opacity: .99
<div class="abs">2: Stacking context example</div>
</div>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
