절대 위치 지정 요소가 윈도우 크기 조정시 겹치지 않게하려면 어떻게해야합니까?

내 애니메이션 스크립트는 div 텍스트 요소의 절대 위치를 수정합니다. 나는 창이나 텍스트 크기가 겹치지 않도록 요소를 유지하는 최선의 방법을 찾아 내려하고있다. 이상적으로 그것은 액체 레이아웃을 취할 것입니다.절대 위치 지정 요소가 윈도우 크기 조정시 겹치지 않게하려면 어떻게해야합니까?

도움을 주시면 감사하겠습니다! 여기 내 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Page</title> 
<style type="text/css"> 
    .slogan 
    { 
     font-weight: bold; 
     font-size: 1.5em; 
     width: 12em; 
     margin: 0.5em; 
     cursor: pointer; 
    } 
    #slogan1 
    { 
     position: absolute; 
     left: -250px;  
     margin-right: 1em;      
    } 
    #slogan2 
    { 
     position: absolute; 
     left: -250px; 
    } 
</style> 
<script type="text/javascript"> 

    window.onload = slideRight; 

    function slideRight() {     
     //code that slides slogan1 and slogan2 into place on page load 
     //by assigning to divElement.style.left recursively 
     slider = document.getElementById('slogan1'); 
     slider.style.left = '5%'; 
     slider = document.getElementById('slogan2'); 
     slider.style.left = '50%'; 
    }    
</script> 
</head> 
<body> 
<div class="slogan" id="slogan1">Some 
    <div id="rep1"> 
     <p>Some copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890</p> 
     <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890?</p> 
     <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890!</p> 
    </div> 
</div>   
<div class="slogan" id="slogan2">Slogan 
    <div id="rep2"> 
     <p>Some copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890</p> 
     <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890?</p> 
     <p>More copy that represents parent slogan ipso lorum 1234567890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890!</p> 
    </div> 
</div> 
</body> 
</html>

출처

2012-11-30 Jean-Paul

가능하면 항상 위치 절대 값을 피하는 것이 좋습니다.

위치 절대 값은 특정 위치에 고정 된 픽셀을 의미합니다. 창 크기를 조정하면 요소가 사용자에게 제공 한 위치를 유지하게됩니다. 즉, 겹치면 그 위치가 그대로 유지됩니다.

콘텐츠를 화면 크기에 맞게 조정하려면 절대 배치 된 요소 대신 유동 요소를 사용하십시오.

출처

2012-11-30 19:25:32

페이지로드 스크립트 끝에 '정적'으로 위치 속성을 수정하려고합니다. 그것은 흥미로운 것들을 수행합니다. 가장 중요한 것은 각 요소가 이제 블록 레벨입니다. –

예, 두 슬라이더를 모두 정적으로 수정하고 'float : left'가 슬로건 클래스 블록에 있는지 확인하여 제대로 작동하는 것 같습니다. 감사! –

나는 당신을 올바른 길로 인도 할 수 있다고 좋았다. 그래도 도움이된다면 대답을 받아 들여야합니다. –

절대 위치 지정 요소가 윈도우 크기 조정시 겹치지 않게하려면 어떻게해야합니까?

답변

관련 문제