如何相对于翻译后的 div 放置 div?

Question

我想向上移动一个div，同时相对于它移动其他元素。这是我想做的一个例子。

当您按下按钮时，div#foo向上移动，而div#bar和div#bar2固定在原位。如何相对于div#foo放置div#bar和div#bar2，以便在div#foo向上移动时它们一起向上移动？

document.getElementById('btn').addEventListener('click', function() {
let foo = document.getElementById('foo');
foo.className += " up";
});

#foo {
background: gray;
}
#bar {
background: black;
}
#bar2 {
background: #222222;
}
.up {
transform: translate(0%, -100%);
}
.container {
width: 30vw;
height: 20vh;
transition: transform 1s linear;
}
#wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#btn {
position: absolute;
top: 20px;
left: 20px;
}

<div id="wrapper">
<div id="foo" class="container"></div>
<div id="bar" class="container"></div>
<div id="bar2" class="container"></div>
</div>
<button id="btn">Move Up<button>

Answer 1

由于你使用Javascript，你可以同时检索它的高度并设置负边距来压缩下一个元素。但它使这个元素的虚拟高度为 0，它将重叠它面前的任何内容。不确定这是你想要的(添加几行以显示它如何在 flex 的副作用旁边进一步消失)。

变换，相似位置：相对仅在视觉上偏移(或变换)元素，但它使用的空间仍位于相同位置和相同大小。

这个想法的例子。

document.getElementById('btn').addEventListener('click', function() {
let foo = document.getElementById('foo');
foo.className += " up";
let mar = foo.offsetHeight;
foo.style.margin = '-' + mar + 'px 0';
});

#foo {
background: gray;
}
#bar {
background: black;
}
#bar2 {
background: #222222;
color:white
}
.up {
transform: translate(0%, -100%);
}
.container {
width: 30vw;
min-height: 20vh;
transition: 1s linear;
}
#wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#btn {
position: absolute;
top: 20px;
left: 20px;
}

<div id="wrapper">
<div id="foo" class="container"></div>
<div id="bar" class="container"></div>
<div id="bar2" class="container">add <br>a line<br>a line<br>a line<br>a line<br>a line<br>a line<br>a line</div>
</div>
<button id="btn">Move Up</button>