CSS的div重叠绝对

这里是我的CSS：http://pastebin.com/UZdSssK8 这是我的HTML：http://pastebin.com/vJcB9nLu CSS的div重叠绝对

每当我拖我的Firefox窗口往下越小，#centre始于div.left重叠。 #centre应该稍微离开左侧居中。我希望它能够流畅地移动，但不会覆盖左侧的任何文字。

谢谢

来源

2011-03-25 Dean

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

不幸的是，如果不知道更多关于你是如何将这些元素放在外面的，我不能给你一个选择。你能多解释一下还是画出你想要做的事情？

来源

2011-03-25 06:40:53 JackWilson

工作样本：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; 
}

来源

2011-03-25 07:17:27 Stellaire

'position：absolute'和'float'不会在一起，只能有一个或另一个。像这样一起使用的浮动是没有做任何事情 - 虽然我会建议漂浮和宽度:) – clairesuzy 2011-03-25 10:05:53

@clairesuzy - 谢谢你。我没有真正的证明 - 读取CSS。我只是试着让它工作哈哈。 =）从'div.left'和'＃centre'中删除'float'不会真的影响输出。 – Stellaire 2011-03-25 10:32:12

不客气，干得好，你是对的删除浮动不会影响输出 - 它的工作正常，因为宽度，无论它的方式:) – clairesuzy 2011-03-25 22:13:22

太多POSITI真正的，因为你总是从左侧定位divs/span来定义重叠eventuall，所以你需要给你至少一个column一个宽度（并且你有这个“snap “宽度为184px），所以你知道右侧必须至少有184个左右的+和”边距“

但是我建议完全失去定位，就像@JackWilson表明的那样，AP （绝对定位）应该谨慎使用，除非你在UI类型界面之后，否则不适合整个布局 - 那么当它被使用时，最好至少把它放在一个相对定位的元素中，以便从它的位置一个已经在流程中的元素。

这里有一个working Sample in JSBIN

我着色的背景，所以你可以“看到”的div，这往往是一个好主意，发展太快的时候..顺便说一句，你也不需要指定的方式显示块在浮动或AP'd元素上时，它们自动在块应用后就会成为块。

来源

2011-03-25 10:15:43 clairesuzy

CSS的div重叠绝对

回答

相关问题