如何保持絕對定位的元素在窗口大小重疊上重疊？

我的動畫腳本修改了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'在口號類塊中，似乎工作。謝謝！ –

好，我可以把你放在正確的道路上。如果它有幫助，請務必接受答案。 –

如何保持絕對定位的元素在窗口大小重疊上重疊？

回答

相關問題