如何让div出现部分覆盖在另一个正方形div上

我想从头开始编码，这样当一个按钮被点击时，它会使选项div出现在现有div的顶部而不会取代它的原始位置。此图说明了这一概念：如何让div出现部分覆盖在另一个正方形div上

http://i.stack.imgur.com/lxL4r.jpg

使得JavaScript的下面在点击按钮

xmlObj.open ('GET', '/ajax?action=editbox', true); 
xmlObj.send ('');

执行我已经把一个的“onClick”命令按钮予省略其余代码之前，这是标准的东西。

这是我现在完全卡住的地方。我想现在有一个名为'editbox.php'的php文件中的代码，它告诉网页使图片中的选项div出现在orignal div的顶部（而不会取代原始div的位置）。

我会很感激任何提示或指导。

来源

2011-05-25 james

要澄清的是，定位给你麻烦的div或PHP脚本发送ajax调用的响应的CSS？ – Jrod 2011-05-25 15:33:14

嗨Jrod。这两个部分都是我不知道该怎么做的。下面的RwL好心地写出了我想如何做CSS部分，现在我正在检查它。谢谢。 – james 2011-05-25 15:45:30

这看起来更像是一个HTML/CSS问题;没有明确的理由（至少，不是从问题的措词）使用PHP来实现这一点。您的选项div可能会在页面第一次加载时出现在DOM中，但其CSS display设置为none。给按钮和父div position: relative然后样式按钮和选项div绝对定位到父的右上角。确保按钮和选项div是该父框的最后一个子项，并且它们按顺序排列，因此z-index自然会按照您希望的方式出现。在该按钮的onclick中，将选项div设置为display: block。

来源

2011-05-25 15:30:28 RwwL

尽管如此，如果我单击按钮并显示选项div，将再次单击它隐藏选项div？ – james 2011-05-25 15:56:50

使用我描述的方法，按钮将被选项div覆盖 - 所以我希望你会添加一个关闭按钮的选项，或保存按钮，除了保存选项将隐藏div，再次显示按钮。如果您希望按钮始终保持最佳状态，则可以将原始标记中按钮的源顺序和选项div颠倒过来。然后，你可以修改按钮上的clickhandler来简单地“如果选项div是可见的，隐藏它，如果没有，显示它”的逻辑。 – RwwL 2011-05-25 16:19:31

你好，我遵循你的指导，并把一个按钮，打开和关闭工作正常的股利。唯一的问题是按钮移动后，我点击它来打开div。我不明白你的意思是颠倒按钮的源顺序和标记中的选项div来解决这个问题，请你解释一下。 – james 2011-05-25 17:44:40

如何让div出现部分覆盖在另一个正方形div上

回答

相关问题