jquery - 为什么 .show() 使目标 div 出现在页面顶部？

Question

我和这个用户 while showing a div it's always showing at top of page 有类似的问题。

我试图让一个 div 显示在适当的位置，但目前当我单击 .show() 的事件链接时，div 出现了，但它出现在页面顶部并与所有内容重叠。

这是我的.js:

$(document).ready(function() {
        $(".hiddenreviewform").hide();
        $('.exposeform').click(function() {
                $(".hiddenreviewform").show();
                return false;   

        });
    });

这是隐藏的 div 的 CSS:

.hiddenreviewform{
    height: 486px;
    margin: 0 auto;
    border-radius: 3px;
    width: 556px;
    margin-left:244px;       
}

对我来说很奇怪的是，如果我删除 js 并删除隐藏 div 上的 display:none，当我刷新页面时它会出现在正确的位置。然而，如果我隐藏 div 然后使用 jquery 显示它，它会出现在页面顶部。我尝试添加position:relative于隐藏的 div，但这并没有解决问题。

这正是我的代码的显示方式，无论出于何种原因，它在 codepen 中有效，但在我的本地机器上无效。 http://codepen.io/donnaloia/pen/raxjbb

唯一的区别是整个 codepen 示例嵌套在更多父 div 中(我无法复制和粘贴其余部分，因为 css 被缩小了，我不确定如何从中复制和粘贴相关代码文件)。那么我是否假设父 div 的设置方式会影响我隐藏的 div 在 show() 上的定位？

任何正确方向的答案或指示将不胜感激。

Answer 1

我有一些建议给你。

1. 一些 <div>里面的标签 <div class="hiddenreviewform">未正确关闭。
2. 不要用这么多<br>标签。这不是好的做法。使用 margin , padding等以正确定位您的数据。
3. 你的 styles真的(抱歉地说)很乱。先对它们进行一些处理。
4. 对于收视率，请使用 ☆ (符号即 & #9734; 没有空格)而不是图像。 This网站会很方便。

第一点会让您完成工作。