如何在此HTML/CSS文件中移動此框？

鑑於這種HTML文檔如何在此HTML/CSS文件中移動此框？

<html> 
<head> 
<title>CSS Layout</title> 
<link href="layout.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div id="header">Header 900x100 px</div> 
    <div id="righttop">RightTop <br />150x200 px</div> 
    <div id="lefttop">LeftTop 150x75 px</div> 
    <div id="content">Content 600x400 px</div> 
    <div id="rightbottom">RightBottom 150x200 px</div> 
    <div id="footer">Footer 900x100 px</div> 
</body>

這個CSS樣式表

body, div { 
    padding: 0; 
    margin: 0; 
    border: solid 1px; 
    width: 900px; 
} 
#header, #footer { 
    width: 898px; 
    clear: both; 
    height: 100px; 
} 
#righttop, #rightbottom{ 
    float: right; 
    width: 150px; 
    height: 200px; 
} 
#rightbottom { 
    clear: right; 
} 
#content { 
    float: left; 
    width: 591px; 
    height: 403px; 
} 
#lefttop { 
    width: 150px; 
    height: 100px; 
    float: left; 
}

我怎麼會去有關移動「RightBottom」框直接是「LeftTop」框下面沒有搞亂一般佈局？

來源

2013-10-15 user2880739

位置：絕對 – bksi

添加位置：絕對給#rightbottom使得rightbottom和lefttop而不是重疊的上彼此頂部。什麼位置：絕對是嗎？ – user2880739

@ user2880739將位置設置爲絕對，可以使用「頂部」，「左側」，「底部」和「右側」等屬性指定特定位置。這意味着它不會相對於DOM中的任何其他對象來限制自己。 – aug

我已更新您的代碼，並附帶必要的更正。這裏是你的評論的jsfiddle文件：http://jsfiddle.net/yv7vs/

HTML：

<html> 
<head> 
    <title>CSS Layout</title> 
    <link href="layout.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

    <div id="header">Header 900x100 px</div> 
    <div id="righttop">RightTop<br/>150x200 px</div> 
    <div id="lefttop">LeftTop 150x75 px</div> 
    <div id="content">Content 600x400 px</div> 
    <div id="rightbottom">RightBottom 150x200 px</div> 
    <div id="footer">Footer 900x100 px</div> 
</body>

CSS：

body, div { 
    padding:0; 
    margin:0; 
    border:solid 1px; 
    width: 900px; 
} 
#header, #footer { 
    width:898px; 
    clear: both; 
    height: 100px; 
} 
#righttop, #rightbottom { 
    width:150px; 
    height: 200px; 
} 
#righttop { 
    float:right; 
} 
#rightbottom { 
    position: absolute; 
    top: 205px; 
} 
#content { 
    float:left; 
    width:591px; 
    height: 403px; 
} 
#lefttop { 
    width:150px; 
    height: 100px; 
    float: left; 
    position: relative; 
}

來源

2013-10-15 00:22:39

如何在此HTML/CSS文件中移動此框？

回答

相關問題