Question

我在定位div时遇到问题，因此它在任何分辨率/缩放级别上都显示在同一位置。当您单击此箭头：http://i.imgur.com/k2rmjLN.png时，我运行jQuery来向下滑动div。问题是我不能让它出现在那个箭头下面。

图片：http://i.imgur.com/CPnMEGV.png

HTML和Javascript：

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script> 
        $(document).ready(function() {
            $("#flip").click(function() {
                $("#panel").slideToggle(100);
            });
        });
    </script>
</head>
<body>
    Welcome Guest!
    <img src="images/down.png" width="18px" height="18px" alt="Login" id="flip" />

    <div id="panel">
        <form name="login" action="#" method="post">
            Username:<br />
            <input type="text" name="username"><br />
            Password:<br />
            <input type="password" name="password"><br /><br />
            <input type="submit" value="Login">
        </form>
    </div>
    ...

CSS：

#flip  {
    float: right;
    margin-left: 5px;
}

#panel {
    display:none;
    position:absolute;
    border: 1px solid;
    padding: 20px;
    right: 0;
    top: 25px;
    z-index: 5;
    background-color: #FFFFFF;
    text-align: left;
}

我还是比较新的，对不好的代码感到抱歉。任何帮助将不胜感激！

Answer 1

您将#panel绝对定位到<body>，并将其right: 0;所以它会出现在右上角。

您可以使用right: *some magic number*px进行游戏，也可以将#panel移到一些相对定位的div中：

<div id="user">
    <img src="...." />

    <div id="panel">
    .....
    </div>
  </div>

#user{
  position: relative;
}  
#panel {
 right: 0;
 top: 45px;
}

这是照片。这就是你需要的吗？ enter image description here

Answer 2

试试这个：

将position:relative;添加到ID为user的div中。

然后将panel的最高值增加到约50px，因此它不会覆盖“欢迎访客”。

现在，面板position:absolute将相对于用户div而不是整个窗口。

最后CSS应如下所示：

#panel {
    display:none;
    position:absolute;
    border: 1px solid;
    padding: 20px;
    right: 0;
    top: 50px;
    z-index: 5;
    background-color: #FFFFFF;
    text-align: left;
}
#user {
    position:relative;
}

使div显示在正确的位置

2 个答案: