Javascript 使相邻div响应同级'；s变换

我的页面上有三个

inline block

div（请参阅）：

Div

#one

包含一个“Show”按钮，其绝对位置使其与Div

#two

重叠。单击“显示”时，div

#two

使用

translateX

从

#one

下滑出，如下所示：

发生这种情况时，我想按下div

#two

，使其显示在div

#two

的正下方，如下所示：

---

我不知道如何使用纯CSS来实现这一点，而不涉及使用

#three{transform:translateY（…）}

沿Y轴移动

#three

。我想知道这里的

translateX

是否是错误的方法，因为它不会干扰相邻元素的位置，但我不知道该用什么来代替它。

正如我在评论部分所说的：这实际上取决于你的最终目标是什么，以及你在div中放了什么内容——一切是如何组织的

我觉得这更像是一个XY问题。也就是说，设计选择需要一种特殊情况/解决方案，这种特殊情况/解决方案可以用另一种方式解决，这样“黑客”解决方案就不必首先存在

尽管如此，由于您提出了要求，我为您提供了解决此特定问题的方法：

const container=document.querySelector（'.container'）；
const slide=document.getElementById（'show'）；
const done=document.getElementById（'hide'）；
consttwo=document.getElementById（'two'）；
const right=document.querySelector（'.right'）；
show.addEventListener（'单击'，函数（）{
2.classList.add（'show'）；
右。classList.add（'shift'）；
});
hide.addEventListener（'click'，function（）{
2.classList.remove（'show'）；
setTimeout（函数（）{
右。classList.remove（'shift'）；
}, 1000)
});
。左，
.对{
位置：相对位置；
高度：200px；
边缘顶部：5px；
显示：内联块；
边框：1px纯黑；
浮动：左；
}
.左{
宽度：100px；
}
.对{
宽度：200px；
左边距：10px；
变换：translateX（0）；
}
.右移{
清除：左；
显示：块；
浮动：无；
转换：translateX（100px）；
}
#一,，
#两个{
身高：100%；
}
#一个{
背景颜色：浅蓝色；
位置：绝对位置；
z指数：1；
}
#两个{
背景颜色：黄色；
变换：translateX（0）；
转变：转变1s；
}
#2.表演{
转化：translateX（100%）；
}

单击“显示”以显示面板2
显示
单击“隐藏”以隐藏面板2
隐藏
其他一些内容
似乎您的代码工作正常<代码>#三个

在下面显示为

#两个

滑出。问题是什么？@gpl，我正在寻找一种解决方案，它不依赖于我必须指定

translateY

。尽可能避免使用绝对定位，除非你有充分的理由不这样做，因为它在静态页面内容中没有大小（就像绘画程序中的另一层）。即，蓝色差异不应为绝对值。设计选择似乎有些奇怪。要么让内容一直正确，要么让它在底部说。谢谢@F.Müller，我之所以将

#three

放在

#one

的右边，是因为

#one

的高度非常大，而将

#three

放在下方会迫使用户向下滚动页面才能访问它，这可能很麻烦。还有一种危险是，用户可能会完全错过它，因为它会看不见，记不住。所以我认为把它放在右边不仅会让它更容易访问，而且对用户来说更容易看到。由于

#two

在垂直方向上不会占用太多空间，

#two

可以在用户单击

Show

@user51462时轻松滑到下方。好的，这取决于您显示的信息/内容的类型。如果它是

#three

中页面的主要内容，您可能不应该触摸它。我建议你选择第二张图片中的东西。否则，它有点违背了显示/隐藏机制的目的。如果两个中的信息很重要，那么为什么不首先将其嵌入主要内容中呢？你可以把它设计成一个可折叠的扰流板元素。谢谢你的建议@F.Müller。我喜欢替代解决方案，但我无法在我的用例中实现它，因为toggleable部分必须滑到右侧。我试图使我的原始解决方案不那么粗糙（这是我的修改版）。这是否能更好地了解预期结果？最终的结果与我所追求的非常接近，只是当红色框显示出来时，我无法让黄色框位于红色框下方。@user51462类似的内容？