使div出现在正确的位置

我在定位div时遇到了问题，因此它在任何分辨率/缩放级别的相同位置出现。当你点击这个箭头：http://i.imgur.com/k2rmjLN.png，我运行一个jQuery向下滑动div。问题是我无法让它出现在那个箭头下面。使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; 
}

我还是相当新的这一点，不好的代码非常抱歉。任何帮助，将不胜感激！

来源

2014-01-12 o.o

你所需要的'位置：面板上absolute'？ – lukasgeiter

该面板应该放在另一个元素内吗？ – Sergio

感谢您提供网站链接。我会尽快发布答案 – lukasgeiter

试试这个：

添加position:relative;到您的div id为user。

然后将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; 
}

来源

2014-01-12 19:13:08 lukasgeiter

@yayu没问题:) – lukasgeiter

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

你可以玩right: *some magic number*px或移动一些relativly定位的div里面的#panel：

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

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

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

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

来源

2014-01-12 19:08:39

谢谢！我首先看到了lukasgeiter的解决方案，但你的基本上是一样的。这正是我需要的。 –

使div出现在正确的位置

回答

相关问题