Question

当点击另一个div时，我无法弄清楚如何进行div移动。

这是一个jsfiddle演示：https://jsfiddle.net/vufosn18/（确保全屏使用，因此图像不会与文本重叠）

我一直在谷歌上搜索一下，找不到任何东西，所以我试过了：

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

当我点击可行性时，它为施工管理提供了300px的保证金。

如果你的答案可能是JavaScript / CSS，那么任何帮助都会受到赞赏。

Answer 1

在一个答案中很难解决所有问题。但我会试着让你前进：

一切都是绝对的，我认为这不适合你的情况。 Read more
您到处都在使用ID，导致大量重复样式。尝试将其更改为类。这将更容易管理小的变化。
我建议检查您是否正在使用html strict，这可能会阻止在不同浏览器中出现罕见情况。（FYI）

回答你的问题：

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

对于您想要在每个标签中显示的内容，您可以拥有独立的html / css。默认情况下是img和p relative。所以他们不会重叠。

Answer 2

这是一个简单的动画

点击你好，带有世界一词的div将向下移动

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在div焦点重叠的图像

2 个答案:

回答你的问题：