十步把握CSS机关定位（译）

发布时间：2018-08-21 07:46:27 所属栏目：创业来源：站长网

导读：猛火网(LieHuo.Net)教程有时中看到此文，因作者夸大个中避开了赏识器bug/分歧，以是小我私人以为值得小心。鄙人细心看了此文，自觉受益匪浅，屡试不爽，服气作者对css机关的精辟总结，趁便小译了一段，英文程度有限，且小我私人凡是写写php，对css相识不深却有点

　　猛火网(LieHuo.Net)教程有时中看到此文，因作者夸大个中避开了赏识器bug/分歧，以是小我私人以为值得小心。鄙人细心看了此文，自觉受益匪浅，屡试不爽，服气作者对css机关的精辟总结，趁便小译了一段，英文程度有限，且小我私人凡是写写php，对css相识不深却有点乐趣，错误之处还请指正。

　　小我私人没有空间，代码中的css文件和js保存了完备路径：http://www.barelyfitz.com/screencast/html-training/css/positioning/

　　原文地点：http://www.barelyfitz.com/screencast/html-training/css/positioning/

　　若有转载，请注明原文出处，译过的就在这里了。

<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>10步把握CSS定位: position static relative absolute float - LIEHUO.NET</title> <link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber-print.css" type="text/css" media="print" /> <style type="text/css" media="screen"> #example { float:right; } #example div { } #div-before, #div-after { background-color:#eee; color:#000; } #div-1 { width:400px; background-color:#000; color:#fff; } #div-1-padding { padding:10px; } #div-1a { background-color:#888; color:#fff; } #div-1b { background-color:#666; color:#fff; } #div-1c { background-color:#aaa; color:#fff; } #example div p { margin:0 .25em; padding:.25em 0; } #description { float:left; width:40%; } pre { padding:1em; border:1px dashed #aaa; background:#fafafa; } p { margin:0.5em 0; } h3 { color:#999; } </style> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/1.css" type="text/css" title="1" media="screen" /> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/2.css" type="text/css" title="2" media="screen" /> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/3.css" type="text/css" title="3" media="screen" /> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/4.css" type="text/css" title="4" media="screen" /> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/5.css" type="text/css" title="5" media="screen" /> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/6.css" type="text/css" title="6" media="screen" /> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/7.css" type="text/css" title="7" media="screen" /> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/8.css" type="text/css" title="8" media="screen" /> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/9.css" type="text/css" title="9" media="screen" /> <link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/10.css" type="text/css" title="10" media="screen" /> </head> <body > <table id="layout_table" cellpadding="0" cellspacing="0" border="0" width="100%"> <tr valign="top"> <td id="block_left_kludge"></td> <td id="block_middle" width="100%" rowspan="2"> <div id="content"> <h1>10步把握CSS定位: position static relative absolute float</h1> <div id="description"> <div class="tabber"> <div id="text-1" class="tabbertab" title="1"> <h2>1. position:static</h2> <p>元素的 position 属性默认值为:<em>static</em>，即该元素呈此刻文档的通例位置，不会从头定位。</p> <p>凡是此属性值可以不配置，除非是要包围之前的界说。</p> <pre>#div-1 { position:static; } </pre> </div> <div id="text-2" class="tabbertab" title="2"> <h2>2. position:relative</h2> <p>配置了 <em>position:relative</em>，便可以团结<em>top</em> 、 <em>bottom</em>、 <em>left</em> 、 <em>right</em> 的属性来偏移其文档的通例位置。</p> <p>譬喻将 div-1 向下移动 20 像素、向左移动 40 像素:</p> <pre>#div-1 { position:relative; top:20px; left:-40px; } </pre> <p>留意 div-1 未被移动之前的处所，此刻多了一点旷地，紧接着 div-1 的元素(div-after)却没有被移动，究竟上即便 div-1 被移动了，<strong>它仍占有原始位置</strong>。</p> <p>貌似 <em>position:relative</em> 用处不大(我到认为这点很有效)，但在后头的内容中显得尤为重要。</p> </div> <div id="text-3" class="tabbertab" title="3"> <h2>3. position:absolute</h2> <p>配置了 <em>position:absolute</em>，即绝对定位，便可以将元素放在文档中任何想放的位置。</p> <p>譬喻将 div-1a 安排到右上角：</p> <pre>#div-1a { position:absolute; top:0; right:0; width:200px; } </pre> <p>留意！因为 div-1a 被移走, 页面中的其他元素位置也变了： div-1b, div-1c, div-after 都因此上移了。</p> <p>div-1a 被安排在页面的右上角。能直接地定位元素很利便，但浸染也不大。</p> <p>这里真正要做的是将 div-1a <em>相对付</em> div-1 定位，这就又要讲到 relative 属性了。</p> <h3>注</h3> <ul> <li><b>IE赏识器</b>Bug：配置了相对宽度(如 "width:50%")，该宽度将基于父元素而非自身。</li> </ul> </div> <div id="text-4" class="tabbertab" title="4"> <h2>4. position:relative + position:absolute</h2> <p>配置div-1的位置为 <em>relative</em> ， div-1中元素的定位都将相对付div-1。现将div-1a的position设为:absolute，可以实现将其置于div-1的右上角：</p> <pre>#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } </pre> </div> <div id="text-5" class="tabbertab" title="5"> <h2>5. 两列绝对定位</h2> <p>接下来行使relative 和absolute 实现两列的绝对定位：</p> <pre>#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } </pre> <p>行使绝对定位(absolute positioning)的利益就是不需思量元素在html中的位置，可以对元素恣意安排，此处存心将div-1b放到div-1a之前；</p> <p>留意，尚有个元素被绝对定位的元素遮住了，怎么办？</p> </div> <div id="text-6" class="tabbertab" title="6"> <h2>6. two column absolute height</h2> <p>一种步伐是配置牢靠高度。</p> <p>但不是万全之策，由于元素的高度、字体的巨细并不老是确定的。</p> <pre>#div-1 { position:relative; height:250px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } </pre> </div> <div id="text-7" class="tabbertab" title="7"> <h2>7. float(浮动)</h2> <p>针对高度不定的环境，绝对定位欠好用，于是想到另一方案。</p> <p>可以只管行使向左或向右浮动来实现笔墨环抱，出格是环抱图片，此处用于更伟大的机关事变(也只有效这种要领)。</p> <pre>#div-1a { float:left; width:200px; } </pre> </div> <div id="text-8" class="tabbertab" title="8"> <h2>8. 多列浮动</h2> <p>将两列都像左浮动，可以实现两列并列。</p> <pre>#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; } </pre> </div> <div id="text-9" class="tabbertab" title="9"> <h2>9. 多列浮动后破除浮动</h2> <p>将元素浮动后，再行使"clear" 破除浮动，后头内容拉向下。</p> <pre>#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; } </pre> </div> <div id="text-10" class="tabbertab" title="10"> <h2>10. Disclaimer & Resources</h2> <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> <p>The following page was invaluable:<br /> <a href="http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute" _fcksavedurl="http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute">Relatively Absolute</a></p> <p>While you're here check out the following:</p> <ul> <li><a href="http://www.barelyfitz.com/projects/" _fcksavedurl="http://www.barelyfitz.com/projects/">BarelyFitz Designs Open-Source Software Projects</a></li> <li><a href="http://www.barelyfitz.com/screencast/" _fcksavedurl="http://www.barelyfitz.com/screencast/">BarelyFitz Designs Screencasts</a></li> </ul> </div> </div> </div> <div id="example"> <div id="div-before"> <p>id = div-before</p> </div> <div id="div-1"> <div id="div-1-padding"> <p>id = div-1</p> <div id="div-1a"> <p>id = div-1a</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p> </div> <div id="div-1b"> <p>id = div-1b</p> <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> </div> <div id="div-1c"> <p>id = div-1c</p> </div> </div> </div> <div id="div-after"> <p>id = div-after</p> </div> </div> </div></td> </tr> <tr> <td></td> </tr> <tr valign="top"> <td colspan="3"></td> </tr> </table> </body> </html>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如