CSS 위치 : 절대 화면 해상도 문제

Question

CSS 코드 : 나는에 대해 위의 코딩을 수행 한

top:45; 
left:98; 
float:right; 
position:absolute;z-index:2; 

I 1024 해상도에서 일하고 있었다,하지만 난 다른 해상도에서 동일한 테스트 때 밖으로 때 div 부동 정렬의.

어떻게 해결할 수 있습니까?

Answer 1

절대적으로 배치 된 요소는 상대적으로 위치 된 조상 또는 창에 따라 배치됩니다. 그것은 당신의 경우처럼 들리지만, 그것은 창문에 위치하고 있습니다.

이 문제를 해결하는 방법은 상대 컨테이너에 절대적으로 배치 된 <div>을 넣는 것입니다. 그런 식으로, 윈도우의 크기가 변경, 그것은 올바른 자리에 남아있을 것입니다 : 위의 솔루션

<div style="position: relative"> 
    <div style="position: absolute; left: 98px; top: 45px;"> 
     This div will always be 98px from the left and 45px from the top of its parent . 
    </div> 
</div> 

Answer 2

픽셀 대신 %을 사용하십시오. 출력물을 만드는 데 도움이 될 수 있습니다.

Answer 3

요소가 상대 위치에있는 다른 요소에 포함되지 않는다고 가정 할 때, 위치 지정중인 요소는 해상도에 관계없이 같은 위치에 있어야합니다.

은 반드시 사용 확인 :

top: 45px 
left: 98px 

당신은 위의 코드에서 떨어져 픽셀 선언을 떠났다.

또한 float : right는 위치 지정된 요소에서 필요하지 않습니다. position : absolute는 문서의 일반적인 흐름에서 벗어납니다.

Answer 4

없음 이 절대 위치에 그것을 유지하고 마진 탑을주고 ... 나를 위해 작동하지 않습니다, 여백 - 왼쪽 ... %처럼; 자동가 w.r.t.를 조정합니다

margin-top:10%; 
margin-left:5%; 

화면 해상도 ...

이것은 나를 위해 완벽하게 작동했습니다. 다른 해상도로 테스트되었습니다.

재미있게 보내세요!