CSS - 位置：絕對創造物浮動：左場景..我該如何解決它？

我有這種情況下，我試圖做兩層畫布，所以我必須使用position和什麼不..然後..下面的東西......都隱藏在畫布下面。我該如何做到這一點，所以DIV的下一步是在畫布的底部？CSS - 位置：絕對創造物浮動：左場景..我該如何解決它？

這裏是的jsfiddle：http://jsfiddle.net/qtjua/

來源

2012-07-09 nn2

在畫布下面（外面）或字面上對齊到畫布底部（裏面）？這裏有一個區別，但大多數都提到「下面」。 – 2012-07-09 03:33:22

剛剛成立的 '寬度' &畫布的 '高度' 到 '#screen'。

#screen { 
position: relative; 
border: 4px solid #333; 
/* New stuff */ 
width: 512px 
height: 352px; 
}

這裏是的jsfiddle：http://jsfiddle.net/THkmG/3/

希望它能幫助！

來源

2012-07-09 03:31:32 serialhtml

阿格。我怎麼沒有抓住這個。菜鳥的錯誤。謝謝。 – nn2 2012-07-09 03:41:53

不客氣。別擔心，我們所有人都會犯這樣的小錯誤。 ;） – serialhtml 2012-07-09 03:45:53

是你的「Hello World」。消息是後面的，因爲你的<div id="screen">有position:relative;，你的convas高度是352px，所以你可以在你的消息div中使用252px的margin頂部。這裏是代碼：

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>stackoverflow</title> 
<style type="text/css"> 

#screen {position:relative;border:4px solid #333;} 
#canvas { 
      background:#ABABAB; 
      margin:0;padding:0; 
      width:512px; 
      height:352px; 
      } 
</style> 


</head> 

<body> 
<div id="screen"> 
<canvas id="canvas" width="512" height="352" 
    style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 

<canvas id="drawing" width="512" height="352" 
    style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 

</div> 
<div style="float:left; margin: 352px 0 0;">Hello World.</div> 
</body> 
</html>

來源

2015-10-29 11:30:51

CSS - 位置：絕對創造物浮動：左場景..我該如何解決它？

回答

相關問題