对transform移动的区域进行补偿: translate
对transform移动的区域进行补偿: translate
提问于 2019-04-02 08:05:28
我正在尝试删除元素通过transform: translateY移动后留下的空白区域。所以基本上在下面的代码中，我希望黄色元素在蓝色元素的正下方，中间没有空格。因为它是一个模板，所以我需要在不更改上面或下面元素的代码的情况下实现这一点。元素将按元素大小的百分比移动。我最初的想法是添加
边际-底部：-50%；
但50%是根据元素的宽度而不是高度来计算的。另一个想法是让这个位置成为绝对。但这也不起作用，因为我不知道元素的内容会有多大。
你知道如何仅使用css来实现这一点吗？
div {
padding: 50px;
}
.wrapper {
background-color: green;
position: absolute;
width: 500px;
height: 500px;
}
.above {
background-color: red;
}
.moved {
background-color: blue;
transform: translateY(-50%);
}
.below {
background-color: yellow;
}<div class="wrapper">
<div class="above">
</div>
<div class="moved">
</div>
<div class="below">
</div>
</div>
编辑:更准确地说:div表示我的模板的独立部分。因为这些是可重用的组件，所以我不能编辑其他部分(下面和上面)。因此，我正在寻找一种解决方案，其中移动的部分只使用与翻译后的空间一样多的空间。
回答 2
Stack Overflow用户
发布于 2019-04-02 08:20:20
由于您将每个div的高度定义为100px，并将蓝色的高度转换为50%的高度= 50px，因此可以添加一个margin-bottom: -50px;并将其全部设置好
Stack Overflow用户
发布于 2019-04-02 08:18:57
试着在你的黄色元素上添加一个translateY(-50%)，这将使它向上移动，以消除它和蓝色之间的空格。
.below {
background-color: yellow;
transform: translateY(-50px);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55465154
复制相关文章
相似问题
腾讯云开发者
