Jquery 使div出现在正确的位置_Jquery_Css_Css Position

Jquery 使div出现在正确的位置

jquery css

Jquery 使div出现在正确的位置,jquery,css,css-position,Jquery,Css,Css Position,我很难定位一个div，使它在任何分辨率/缩放级别上都显示在同一位置。单击此箭头时，我运行jQuery向下滑动div。问题是我不能让它出现在箭头下图片： HTML和Javascript： <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document

我很难定位一个div，使它在任何分辨率/缩放级别上都显示在同一位置。单击此箭头时，我运行jQuery向下滑动div。问题是我不能让它出现在箭头下

图片：

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>
    ...

我对这个还是相当陌生的，所以很抱歉代码不好。任何帮助都将不胜感激

您将

#面板

绝对定位在

上，并将其

设置为正确：0

；因此，它将出现在右角

您可以使用

右键：*一些神奇数字*px

或将

#面板

移动到相对位置的div中：

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

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

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


.....
#使用者{
位置：相对位置；
}  
#面板{
右：0；
顶部：45px；
}

这是照片。这就是你需要的吗

试试这个：

添加

位置：相对

使用id

用户

发送到您的div

然后将

面板

的最大值增加到大约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;
}

您是否需要面板上的

位置：absolute

。我会尽快回复你的！我先看到卢卡斯盖特的解决方案，但你的基本上是一样的。这正是我需要的。

#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;
}