div焦点中的图像重叠

Question

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

以下是jsfiddle演示：https://jsfiddle.net/vufosn18/（确保全屏显示，这样图像就不会与文本重叠）

我在谷歌上搜索了一段时间，什么都找不到，所以我尝试了：

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

当我点击可行性时，它会给建筑管理部门一个最高300像素的利润。

如果您的答案是JavaScript/CSS，我们将不胜感激。

Answer 1

很难在一个答案中解决所有问题。但我会努力让你走：

• 一切都是绝对的，我认为这不适合你的情况。阅读更多

• 你到处都在使用ID，导致了很多重复的样式。尝试将其更改为类。这将更容易管理小的更改。

• 我建议检查一下你是否严格使用html，这可能会防止在不同的浏览器中出现罕见的情况。（FYI）

要回答您的问题：

有很多插件很容易使用。我建议你使用其中一个：

• https://jqueryui.com/accordion/
• 一个循序渐进的例子（只是在谷歌上搜索）

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

Answer 2

这里有一个简单的动画

点击hello，带有单词world的div将向下移动

function click(){
document.getElementById('bottom').style.top="50px"
}
document.getElementById('top').addEventListener('click',click,false)

#top{
  width: 50px;
  height:50px;
  border:solid;
}
#bottom{
  position:relative;
  top:0px;
  width: 50px;
  height:50px;
  border:solid;
  transition-property:top;
  transition-duration:3s;
}

<div id="top">
hello
</div>
<div id="bottom">
world
</div>