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重疊絕對

回答

相關問題