html - 图像在 div 焦点中重叠

Question

我不知道如何在单击另一个 div 时使 div 移动。

这是一个 jsfiddle 演示:https://jsfiddle.net/vufosn18/ (确保将其设置为全屏，这样图像就不会与文本重叠)

我已经用谷歌搜索了一段时间，但找不到任何东西，所以我尝试了:

#feas:focus #construct{
    margin-top: 300px;
    position: absolute;
}

当我点击可行性时，它会为施工管理部门提供 300 像素的边距。

如果您的回答可以用 JavaScript/CSS 编写，我们将不胜感激。

Answer 1

很难在一个答案中解决所有问题。但我会尽力让你继续:

• 一切都是绝对的，我认为不建议您这样做。 Read more

• 您到处都在使用 ID，导致出现大量重复的样式。尝试将其更改为类(class)。这将更容易管理小的变化。

• 我建议检查您是否在工作 html strict ，这可以防止在不同的浏览器中出现罕见的情况。 (仅供引用)

回答你的问题:

有很多易于使用的插件。我建议您改用其中之一:

• https://jqueryui.com/accordion/
• A step by step example (只是用谷歌搜索)
• ..

对于您想在每个选项卡中显示的内容，您可以拥有独立的 html/css。默认情况下是 img 和 p 相对。所以它们不会重叠。