如何防止绝对定位的元素在窗口调整大小时重叠？

Question

My animation script modifies the absolute position of div text elements. 我的动画脚本修改了div文本元素的绝对位置。 I'm trying to figure out the best approach to keep the elements from overlapping on a window or text resize. 我试图找出最好的方法，以防止元素重叠在窗口上或调整文本大小。 Ideally it would take on a liquid layout. 理想情况下，它将采用液体布局。

Any help that can be given is appreciated! 可以给予任何帮助，我们将不胜感激！ Here is my code: 这是我的代码：

<!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>

Answer 1

You don't.. its exactly why position absolute should be avoided whenever possible. 您不..这就是为什么尽可能避免绝对位置的原因。

Position absolute means pixel fixed at a certain location.. if you resize your window the elements will keep the location you give them, if that means they will overlap, thats what they will do. 绝对位置表示将像素固定在某个位置。如果您调整窗口的大小，则元素将保持您指定的位置，如果这意味着它们将重叠，那就是它们的作用。

If you want your content to adjust to screen size, use floating elements instead of absolutely positioned elements. 如果您希望内容调整为屏幕大小，请使用浮动元素，而不要使用绝对定位的元素。

如何防止绝对定位的元素在窗口调整大小时重叠？

问题描述

1 个解决方案

解决方案1
0 已采纳 2012-11-30 19:25:32

如何防止绝对定位的元素在窗口调整大小时重叠？

问题描述

1 个解决方案

解决方案1 0 已采纳 2012-11-30 19:25:32

解决方案1
0 已采纳 2012-11-30 19:25:32