Swi*_*ger 1 css transform css-position css3 css-transforms
我重新创建了模板中遇到的问题。有一个导航有position: relative;。内部资产净值有一个DIV嵌套两个列表。
名单之一是绝对要坚持导航的位置。当div对其应用了转换时，就会发生此问题。
当绝对位置和相对位置的元素之间的div获得了transform属性时，绝对列表相对于div而不是nav进行定位。
不要为元素留出空间。而是将其放置在相对于其最接近的祖先的指定位置（如果有），或者相对于其包含的块。绝对定位的框可以有边距，并且不会与其他任何边距一起折叠。
这是否意味着变换后的元素是定位元素？为什么这样做呢？我在Edge，FF和Chrome中进行了测试。他们的行为都一样。
您可以在下面运行重新创建的代码段。我正在将鼠标悬停在div上的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会创建一个包含块：
对于其布局由CSS盒模型控制的元素，转换中除“ none”以外的任何值都将同时创建堆栈上下文和包含块。
而且（请参阅规格）：
在绝对定位模型中，框相对于其包含的块显式偏移。
transform元素的属性设置为除t以外的任何值none，会创建一个新的包含块 ; 堆叠上下文与元素的放置方式无关。
请参阅以下片段中的示例。
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>