Html 使两个子元素占据相同的空间而不使父元素塌陷

嗯，我想这个标题解释了我的目标，有可能吗

我想要这个，这样我就可以添加以下CSS

.bawrap:hover > .after {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 1s linear .15s;
    -moz-transition: all 1s linear .15s;
    -o-transition: all 1s linear .15s;
    -ms-transition: all 1s linear .15s;
    transition: all 1s linear .15s; }

.bawrap:hover > .before {
    opacity: 100;
    filter: alpha(opacity=100);
    -webkit-transition: all 1s linear .15s;
    -moz-transition: all 1s linear .15s;
    -o-transition: all 1s linear .15s;
    -ms-transition: all 1s linear .15s;
    transition: all 1s linear .15s;
}

---

要制作前后动画图像。

为此，需要使用属性n子对象，例如：

.bawrap:nth-child(1):hover: > .after {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 1s linear .15s;
    -moz-transition: all 1s linear .15s;
    -o-transition: all 1s linear .15s;
    -ms-transition: all 1s linear .15s;
    transition: all 1s linear .15s; }

.bawrap:nth-child(2):hover > .before {
    opacity: 100;
    filter: alpha(opacity=100);
    -webkit-transition: all 1s linear .15s;
    -moz-transition: all 1s linear .15s;
    -o-transition: all 1s linear .15s;
    -ms-transition: all 1s linear .15s;
    transition: all 1s linear .15s;
}

---

你说的占据同一个空间是什么意思？占据同一个空间的意思是，它们相互重叠。我以前只是给父对象一个相对的位置，给子对象一个绝对的位置，但如果我不手动设置父对象的高度和宽度，这会使父对象崩溃，两个孩子的尺寸是一样的吗？顺便说一句，最好将与转换相关的属性移动到选择器与两个元素匹配的单个规则中。将其中一个保持在正常流中，并将另一个相对于容器元素的绝对值。