[转] [译]10步掌握CSS布局定位: position static relative absolute float
无意中看到此文，因作者强调其中避开了浏览器bug/分歧，所以个人认为值得借鉴。
代码中的css文件和js保留了完整路径：http://www.barelyfitz.com/screencast/html-training/css/positioning/
原文地址：http://www.barelyfitz.com/screencast/html-training/css/positioning/
转载地址：http://www.cnblogs.com/cnfiowen/archive/2009/04/28/1445397.html
Code1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>10步掌握CSS定位: position static relative absolute float</title>
6<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.css" type="text/css" media="screen" />
7<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber-print.css" type="text/css" media="print" />
8<style type="text/css" media="screen">
9#example {}{
10 float:right;
11}
12#example div {}{
13}
14#div-before, #div-after {}{
15 background-color:#eee;
16 color:#000;
17}
18#div-1 {}{
19 width:400px;
20 background-color:#000;
21 color:#fff;
22}
23#div-1-padding {}{
24 padding:10px;
25}
26#div-1a {}{
27 background-color:#888;
28 color:#fff;
29}
30#div-1b {}{
31 background-color:#666;
32 color:#fff;
33}
34#div-1c {}{
35 background-color:#aaa;
36 color:#fff;
37}
38#example div p {}{
39 margin:0 .25em;
40 padding:.25em 0;
41}
42#description {}{
43 float:left;
44 width:40%;
45}
46pre {}{
47 padding:1em;
48 border:1px dashed #aaa;
49 background:#fafafa;
50}
51p {}{
52 margin:0.5em 0;
53}
54h3 {}{
55 color:#999;
56}
57</style>
58<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/1.css" type="text/css" title="1" media="screen" />
59<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/2.css" type="text/css" title="2" media="screen" />
60<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/3.css" type="text/css" title="3" media="screen" />
61<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/4.css" type="text/css" title="4" media="screen" />
62<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/5.css" type="text/css" title="5" media="screen" />
63<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/6.css" type="text/css" title="6" media="screen" />
64<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/7.css" type="text/css" title="7" media="screen" />
65<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/8.css" type="text/css" title="8" media="screen" />
66<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/9.css" type="text/css" title="9" media="screen" />
67<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/10.css" type="text/css" title="10" media="screen" />
68<script type="text/javascript">
69function chooseStyle(title)
70{
71 setActiveStyleSheet(title);
72}
73var tabberOptions = {
74 onTabClick:
75 function(tabIndex)
76 {
77 chooseStyle(tabIndex+1);
78 }
79};
80</script>
81<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/styleswitcher.js"></script>
82<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.js"></script>
83<script type="text/javascript">
84/**//* If the user has javascript, temporarily set the .tabber class to
85 display:none */
86//document.write(unescape('%3Cstyle%20type%3D%22text/css%22%3E%0A.tabber%20%7B%20display%3Anone%3B%20%7D%0A%3C/style%3E%0A'));
87</script>
88</head>
89<body >
90<table id="layout_table" cellpadding="0" cellspacing="0" border="0" width="100%">
91 <tr valign="top">
92 <td id="block_left_kludge"></td>
93 <td id="block_middle" width="100%" rowspan="2">
94 <div id="content">
95 <h1>10步掌握CSS定位: position static relative absolute float</h1>
96 <div id="description">
97 <div class="tabber">
98 <div id="text-1" class="tabbertab" title="1">
99 <h2>1. position:static</h2>
100 <p>元素的 position 属性默认值为:<em>static</em>，即该元素出现在文档的常规位置，不会重新定位。</p>
101 <p>通常此属性值可以不设置，除非是要覆盖之前的定义。</p>
102 <pre>#div-1 {
103 position:static;
104}
105</pre>
106 </div>
107 <div id="text-2" class="tabbertab" title="2">
108 <h2>2. position:relative</h2>
109 <p>设置了 <em>position:relative</em>，便可以结合<em>top</em> 、 <em>bottom</em>、 <em>left</em> 、 <em>right</em> 的属性来偏移其文档的常规位置。</p>
110 <p>例如将 div-1 向下移动 20 像素、向左移动 40 像素:</p>
111 <pre>#div-1 {
112 position:relative;
113 top:20px;
114 left:-40px;
115}
116</pre>
117 <p>注意 div-1 未被移动之前的地方，现在多了一点空隙，紧接着 div-1 的元素(div-after)却没有被移动，事实上即便 div-1 被移动了，<strong>它仍占据原始位置</strong>。</p>
118 <p>貌似 <em>position:relative</em> 用处不大(我到觉得这点很有用)，但在后面的内容中显得尤为重要。</p>
119 </div>
120 <div id="text-3" class="tabbertab" title="3">
121 <h2>3. position:absolute</h2>
122 <p>设置了 <em>position:absolute</em>，即绝对定位，便可以将元素放在文档中任何想放的位置。</p>
123 <p>例如将 div-1a 放置到右上角：</p>
124 <pre>#div-1a {
125 position:absolute;
126 top:0;
127 right:0;
128 width:200px;
129}
130</pre>
131 <p>注意！由于 div-1a 被移走, 页面中的其他元素位置也变了： div-1b, div-1c, div-after 都因此上移了。</p>
132 <p>div-1a 被放置在页面的右上角。 能直接地定位元素很方便，但作用也不大。</p>
133 <p>这里真正要做的是将 div-1a <em>相对于</em> div-1 定位，这就又要讲到 relative 属性了。</p>
134 <h3>注</h3>
135 <ul>
136 <li>IE浏览器Bug：设置了相对宽度(如 "width:50%")，该宽度将基于父元素而非自身。</li>
137 </ul>
138 </div>
139 <div id="text-4" class="tabbertab" title="4">
140 <h2>4. position:relative + position:absolute</h2>
141 <p>设置div-1的位置为 <em>relative</em> ， div-1中元素的定位都将相对于div-1。现将div-1a的position设为:absolute，可以实现将其置于div-1的右上角：</p>
142 <pre>#div-1 {
143 position:relative;
144}
145#div-1a {
146 position:absolute;
147 top:0;
148 right:0;
149 width:200px;
150}
151</pre>
152 </div>
153 <div id="text-5" class="tabbertab" title="5">
154 <h2>5. 两列绝对定位</h2>
155 <p>接下来使用relative 和absolute 实现两列的绝对定位：</p>
156 <pre>#div-1 {
157 position:relative;
158}
159#div-1a {
160 position:absolute;
161 top:0;
162 right:0;
163 width:200px;
164}
165#div-1b {
166 position:absolute;
167 top:0;
168 left:0;
169 width:200px;
170}
171</pre>
172 <p>使用绝对定位(absolute positioning)的优点就是不需考虑元素在html中的位置，可以对元素任意放置，此处故意将div-1b放到div-1a之前；</p>
173 <p>注意，还有个元素被绝对定位的元素遮住了，怎么办？</p>
174 </div>
175 <div id="text-6" class="tabbertab" title="6">
176 <h2>6. two column absolute height</h2>
177 <p>一种办法是设置固定高度。</p>
178 <p>但不是万全之策，因为元素的高度、字体的大小并不总是确定的。</p>
179 <pre>#div-1 {
180 position:relative;
181 height:250px;
182}
183#div-1a {
184 position:absolute;
185 top:0;
186 right:0;
187 width:200px;
188}
189#div-1b {
190 position:absolute;
191 top:0;
192 left:0;
193 width:200px;
194}
195</pre>
196 </div>
197 <div id="text-7" class="tabbertab" title="7">
198 <h2>7. float(浮动)</h2>
199 <p>针对高度不定的情况，绝对定位不好用，于是想到另一方案。</p>
200 <p>可以尽量使用向左或向右浮动来实现文字环绕，特别是环绕图片，此处用于更复杂的布局工作(也只有用这种方法)。</p>
201 <pre>#div-1a {
202 float:left;
203 width:200px;
204}
205</pre>
206 </div>
207 <div id="text-8" class="tabbertab" title="8">
208 <h2>8. 多列浮动</h2>
209 <p>将两列都像左浮动，可以实现两列并列。</p>
210 <pre>#div-1a {
211 float:left;
212 width:150px;
213}
214#div-1b {
215 float:left;
216 width:150px;
217}
218</pre>
219 </div>
220 <div id="text-9" class="tabbertab" title="9">
221 <h2>9. 多列浮动后清除浮动</h2>
222 <p>将元素浮动后，再使用"clear" 清除浮动，后面内容拉向下。</p>
223 <pre>#div-1a {
224 float:left;
225 width:190px;
226}
227#div-1b {
228 float:left;
229 width:190px;
230}
231#div-1c {
232 clear:both;
233}
234</pre>
235 </div>
236 <div id="text-10" class="tabbertab" title="10">
237 <h2>10. Disclaimer & Resources</h2>
238 <p>These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are <em>many</em>).</p>
239 <p>The following page was invaluable:<br />
240 <a href="http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute">Relatively Absolute</a></p>
241 <p>While you're here check out the following:</p>
242 <ul>
243 <li><a href="http://www.barelyfitz.com/projects/">BarelyFitz Designs Open-Source Software Projects</a></li>
244 <li><a href="http://www.barelyfitz.com/screencast/">BarelyFitz Designs Screencasts</a></li>
245 </ul>
246 </div>
247 </div>
248 <!-- /class=tabber -->
249
250 </div>
251 <!-- /id="description -->
252 <div id="example">
253 <div id="div-before">
254 <p>id = div-before</p>
255 </div>
256 <div id="div-1">
257 <div id="div-1-padding">
258 <p>id = div-1</p>
259 <div id="div-1a">
260 <p>id = div-1a</p>
261 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
262 </div>
263 <div id="div-1b">
264 <p>id = div-1b</p>
265 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
266 </div>
267 <div id="div-1c">
268 <p>id = div-1c</p>
269 </div>
270 </div>
271 </div>
272 <!-- /id=div-1-padding /id=div-1 -->
273 <div id="div-after">
274 <p>id = div-after</p>
275 </div>
276 </div>
277 <!-- /id=example -->
278 </div></td>
279 </tr>
280 <tr>
281 <td></td>
282 </tr>
283 <tr valign="top">
284 <td colspan="3"></td>
285 </tr>
286</table>
287</body>
288</html>
浙公网安备 33010602011771号