Javascript 使2个div与2个其他div相互重叠

所以，我不知道如何让div以这样的方式重叠，我很好奇是否有可能。如果是的话，是否也可以使用bootstrap或其他库来实现类似的响应呢？如果是，DIV是否需要完全更改配置，以便内容仍然有意义？（如下图所示）

---

如果这样的事情不能发生（指的是反应），有没有办法让整个事情消失，而展示其他东西

这是可能的。使用CSS flexbox

---

您需要使用css媒体查询切换容器元素的伸缩方向，等等。。。与javascript相比，这是一个与html/css相关的问题。使用CSS flexbox

---

您需要使用css媒体查询切换容器元素的伸缩方向，等等。。。这是一个比javascript更与html/css相关的问题，这可能会给你一个起点

您需要结合使用

@media

查询和

flex

查看

@media

查询：

查看

flex

框：

这段代码可能会有所帮助！（调整输出窗口的大小以查看结果）

请看这里：

.panel容器{
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.小组{
}
上校{
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
}
#a1{
背景颜色：蓝色；
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
}
#a2{
背景颜色：蓝色；
高度：100px；
宽度：100px；
边界半径：50%；
线高：100px；
文本对齐：居中；
}
#a3{
背景颜色：蓝色；
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
}
#b1{
背景色：红色；
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
}
#b2{
背景色：红色；
高度：100px；
宽度：100px；
边界半径：50%；
线高：100px；
文本对齐：居中；
}
#b3{
背景色：红色；
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
}
@仅介质屏幕和（最大宽度：600px）{
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
上校{
显示器：flex；
弯曲方向：立柱；
}
}

A1
A2
A3
地下一层
地下二层
地下三层

这会给你一个开始的地方吗

您需要结合使用

@media

查询和

flex

查看

@media

查询：

查看

flex

框：

这段代码可能会有所帮助！（调整输出窗口的大小以查看结果）

请看这里：

.panel容器{
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.小组{
}
上校{
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
}
#a1{
背景颜色：蓝色；
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
}
#a2{
背景颜色：蓝色；
高度：100px；
宽度：100px；
边界半径：50%；
线高：100px；
文本对齐：居中；
}
#a3{
背景颜色：蓝色；
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
}
#b1{
背景色：红色；
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
}
#b2{
背景色：红色；
高度：100px；
宽度：100px；
边界半径：50%；
线高：100px；
文本对齐：居中；
}
#b3{
背景色：红色；
高度：100px；
宽度：100px；
线高：100px；
文本对齐：居中；
}
@仅介质屏幕和（最大宽度：600px）{
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
上校{
显示器：flex；
弯曲方向：立柱；
}
}

A1
A2
A3
地下一层
地下二层
地下三层

如果您需要div像您所说的那样“重叠”，您完全可以定位div，但我不明白您为什么需要在示例中这样做。为什么不能在上图中的a1、a2、a3周围画一条div（黑线）。这正是div的流动方式。至于使事物出现和消失，这可以通过css媒体查询来完成。如果您需要更改div的配置，也可以使用css order和css gridsAh，@BrettEast，这是一个很好的问题，因为我希望左侧div上有固定的背景图像和内容，而右侧div上有纯色背景和文本，并且我希望它们之间/两者之上都有图像，因此，你可以通过图片的透明部分看到下面的实际div，就像它们在上面悬停一样。在这种情况下，你需要使用

position:absolute以实现此目的。我建议在后台使用它，而不是带内容或图像的div。Imma尝试在代码中实现它，并会让您知道它是否有效，我没有想到它tbh…如果您需要div像您所说的那样“重叠”，您完全可以定位div，但我不明白您为什么需要在示例中使用它。为什么不能在上图中的a1、a2、a3周围画一条div（黑线）。这正是div的流动方式。至于使事物出现和消失，这可以通过css媒体查询来完成。如果您需要更改div的配置，也可以使用css order和css gridsAh，@BrettEast，这是一个很好的问题，因为我希望左侧div上有固定的背景图像和内容，而右侧div上有纯色背景和文本，并且我希望它们之间/两者之上都有图像，所以你可以通过图片的透明部分看到下面的实际div，就像它们在上面盘旋一样