Question

这是我的CSS：http://pastebin.com/UZdSssK8 这是我的HTML：http://pastebin.com/vJcB9nLu

每当我将Firefox窗口向下拖动时，#centre就会开始与div.left重叠。 #centre应略微向左偏心。我希望它能够流畅地移动，但从不与左侧的任何文本重叠。

由于

Answer 1

实际上定位太多了，并且因为你总是将divs / span从左侧定位一个百分比，这必然导致重叠事件，你需要的是给你至少一个列一个宽度（并且你有＃34; snap＆＃34;宽度为184px）所以你知道右边必须至少是184，+和＆＃34;边距＆＃34;从左侧

然而我建议完全失去定位，因为@JackWilson建议，应该谨慎使用AP（绝对定位），除非你在UI类型界面之后再进行整体布局，否则不建议使用AP（绝对定位） - 然后当最好将它放在一个相对定位的元素中，以便从已经在流中的元素中获取它的位置。

这是 working Sample in JSBIN

我为背景着色了所以你可以＆＃34;看到＆＃34;在开发过程中这通常是一个好主意。顺便说一下，你也不需要在浮动或AP的元素上指定显示块，一旦应用了这些属性，它们就会自动成为块

Answer 2

您不能以这种方式使用绝对定位。绝对定位会从文档的正常流程中删除元素。这就好像元素不会像通常那样相互影响 - 因为在这种情况下，div通常不会与另一个div重叠。

不幸的是，如果不了解你实际上是如何试图摆脱这些因素的话，我不能给你一个替代方案。你能解释一下还是画出你想要做的事情的图表？

Answer 3

工作样本：http://jsfiddle.net/dkrEK/

试试这个：

<强> HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
    <link type="text/css" href="ssc.css" rel="stylesheet">
    <title>kd</title>
    </head>
    <body>
        <div class="left">
            <span class="head">
                <a href="#">kd</a>
            </span>
            <div class="snap">
                about me blah blah blah blah blah blah test
            </div>
        </div>
        <div id="centre">
            test <br />
            test
        </div>
    </body>
</html>

<强> CSS

.head {
    font-family:courier-new,monospace;
    font-size:200%;
}
.head > a {
    text-decoration: none;
}
div.left {
    top:35%;
    position:absolute;
    margin-right:50px;

    width: 200px;
    float: left;
}
#centre {
    top:38%;
    font-family:courier-new,monospace;
    font-size:80%;

    position:absolute;
    float: right;
    margin-left: 200px;
}
div.snap {
    font-family:courier-new,monospace;
    font-size:80%;
    padding-top:5px;
    width: 95%;
    left:2%;
    display:block;
}

CSS Divs重叠绝对

3 个答案: