div를 정확한 위치에 표시하십시오.

div 위치를 지정하는 데 문제가있어서 어떤 해상도/확대/축소 수준에서도 같은 위치에 나타납니다. 이 화살표를 클릭하면 : http://i.imgur.com/k2rmjLN.png, div 아래로 슬라이드 jQuery를 실행합니다. 문제는 내가 그 화살 아래에 나타나게 할 수 없다는 것이다.div를 정확한 위치에 표시하십시오.

그림 : http://i.imgur.com/CPnMEGV.png

HTML과 자바 스크립트 :

<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

당신이'위치가 필요하십니까 다음 CSS는 다음과 같아야합니다 결국

? – lukasgeiter

그 패널은 다른 요소 안에 있어야합니까? – Sergio

웹 사이트 링크를 제공해 주셔서 감사합니다. 곧 답변을 게시하겠습니다 – lukasgeiter

이 시도 :

는 ID user와 사업부에 position:relative;를 추가합니다.

그런 다음 panel의 최상위 값을 약 50px로 늘리면 '환영 손님'이 표시되지 않습니다.

이제 패널 position:absolute은 전체 창이 아니라 사용자 div와 관련됩니다. 패널 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; 
}

출처

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를 정확한 위치에 표시하십시오.

답변

관련 문제