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

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

javascript css animation

Javascript 如何在调整窗口大小时防止绝对定位元素重叠？,javascript,css,animation,Javascript,Css,Animation,我的动画脚本修改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/

我的动画脚本修改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>


无标题页
标语
{
字体大小：粗体；
字号：1.5em；
宽度：12em；
边缘：0.5em；
光标：指针；
}
#口号1
{
位置：绝对位置；
左：-250px；
右边距：1米；
}
#口号2
{
位置：绝对位置；
左：-250px；
}
window.onload=slideRight；
函数slideRight（）{
//在页面加载时将标语1和标语2滑动到位的代码
//通过递归地分配给divElement.style.left
slider=document.getElementById（'slogan1'）；
slider.style.left='5%'；
slider=document.getElementById（'slogan2'）；
slider.style.left='50%'；
}               
一些
一些代表益普索lorum 12345678890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890的母公司标语副本
更多代表益普索lorum 12345678890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890的母公司标语副本
更多代表ipso lorum 12345678890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890的家长标语副本
标语
一些代表益普索lorum 12345678890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890的母公司标语副本
更多代表益普索lorum 12345678890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890的母公司标语副本
更多代表ipso lorum 12345678890 2345 7890 234567890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890 2345 7890的家长标语副本

您不需要。。这就是为什么应该尽可能避免绝对位置

绝对位置是指固定在某个位置的像素。。如果调整窗口大小，元素将保持您给定的位置，如果这意味着它们将重叠，则它们将这样做

如果希望内容调整到屏幕大小，请使用浮动元素而不是绝对定位的元素。

我正在考虑在页面加载脚本末尾将position属性修改为“static”。它做了一些有趣的事情，其中最重要的是每个元素现在都是块级别的。是的，将两个滑块修改为静态，并确保“float:left”在标语类块中，这似乎是可行的。谢谢很好，我可以让你走上正确的道路。如果答案有帮助，一定要接受。