绝对定位-Webkit转换内部元素

Question

我有一个div的{​​{1}}：

position: absolute

使用此CSS：

<div class="p1">
    <div class="laser"></div>
    <h2>p1</h2>
</div>

当我将.p1{ position:absolute; top:46px; left:0px; width: 0%; height: calc(100% - 46px); background-color: blue; z-index: 2; -webkit-transition: width 4s ease; -moz-transition: width 4s ease; -o-transition: width 4s ease; -ms-transition: width 4s ease; transition: width 4s ease; } .laser{ height: 100%; width: 3px; background: #ff0000; position: relative; top: 46px; left: 0px; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 20px 10px #ff0000; -moz-box-shadow: 0 0 20px 10px #ff0000; box-shadow: 0 0 20px 10px #ff0000; z-index: 3; } 应用于width: 100%时，它会设置动画，但内部元素不会移动（它们始终位于同一位置）。同样，当div.p1具有p1时，我可以看到其内部内容，而我不知道为什么。

编辑：

内部元素不会更改位置，因为位置已设置:)。它足以消除激光类别的相对位置并像tihs一样添加右拉类别：

width: 0%

Answer 1

python