定位的CSS樣式

CSS之正常排版 文字與Inline元素由上而下、由左而右依序排列 區塊元素由上而下排列，左右空間被區塊元素整個佔住 每個元素位置變動，將影響周遭元素位置 以上可使用CSS定位相關屬性加以控制改變

float屬性 float屬性用來設定元素浮動的位置 left | right | none

p#about {float:left; width:180px; padding: 10px; margin: 10px; color: green; border: 2px solid blue; } <p id="about"> About DLNA<br /> The Digital Living Network Alliance (DLNA) … </p> <p id="intro"> Digital Living Network Alliance began in 2003 when a collection of companies from around the world agreed that they all made better products when those products were compatible. <p id="overview"> Today, more than 245 companies comprise DLNA, all brands that you know. They include consumer electronics, computer …

p#about, p#intro { float:left; width:180px; padding: 10px; margin: 10px; color: green; border: 2px solid blue; }

p#about { float:left; width:180px; padding: 10px; margin: 10px; color: green; border: 2px solid blue; } p#intro { float:right; width:180px; padding: 10px; margin: 10px; color: green; border: 2px solid blue; }

清除浮動元素 使用clear屬性 屬性值 left | right | both | none 浮動在(left | right | both)邊之浮動元素，在其後面使用clear屬性之區塊元素，恢復正常排版。 只適用於區塊元素

<p> <img src="bird.jpg" alt="" style="float: left;" /> 根據CSS的排版模型，在正常版型(normal flow)中，文字元素是由上而下，由左而右的， </p> <h2>沒有清除左邊的浮動元素</h2> <h2 style="clear: left;">清除左邊的浮動元素</h2>

設定定位類型 position屬性 static (靜態): 依照出現順序排列(預設) relative (相對): static | relative | absolute | fixed static (靜態): 依照出現順序排列(預設) relative (相對): 新位置相對於原來排版之位置，移動一個相對位置 但原始空間仍保留。 absolute (絕對): 新位置相對於其包容區塊(該包容區塊亦需定位，即包容區塊也需設定position屬性) 元素從原排版抽離 fixed (固定): 新位置相對於瀏覽器視窗

設定元素位置 top right bottom left <img src="lily.jpg" alt="" style="position: fixed; right: 50px; top: 100px;" />

relative <img … style="position: relative; left: 100px; top: 50px;"/>

absolute <img … style="position: absolute; left: 100px; top: 50px;" />

<div style="position: absolute; left: 50px; top: 100px;"> … <img … style="position: absolute; left: 100px; top: 50px;" /> </div>

fixed <div style="position: absolute; left: 50px; top: 100px;"> … <img … style="position: fixed; left: 100px; top: 50px;" /> </div>

http://ycchen.im.ncnu.edu.tw/www2011/lab/position.zip #tbg { position: absolute; top: 0px; left: 0px; z-index:-1; } #north { width: 150px; position: absolute; bottom: 20px; right: 20px; } <div id="content"> <img id="tbg" src="tbg.png" /> <h1>日劇：來自北國</h1> <img id="north" src="north.jpg" /> <p> 倉本聰一起筆就是乾淨俐落。<br/> … </div>

元素溢位處理方式 overflow屬性 visible | hidden | scroll | auto overflow <div style="height: 110px; width: 250px;"> 當元素的內容超過元素方框的範圍時，您使用overflow屬性用來指定元素溢位的處理方式：… </div> overflow overflow屬性 visible | hidden | scroll | auto

overflow: visible; overflow: hidden; overflow: scroll; overflow: auto;

顯示與隱藏元素 visibility: visible | hidden | collapse <span style="visibility: hidden;">visibility</span>  適用於表格

display屬性 display: inline | block | list-item | none | run-in | compact | marker | table | inline-block | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption

a {width:120px; text-align:right; margin:4px; padding: 2px 4px 2px; text-decoration: none; border: #f90 solid 1px; border-left-width: 10px; background-color: #fc0; } .menu a { display: block; <p> <a href="http://www.ncnu.edu.tw/">NCNU</a> <a href="https://webmail.ncnu.edu.tw/">暨大 Web Mail</a> <a href="http://www.im.ncnu.edu.tw/">暨大資管系</a> </p> <div class="menu"> </div>

display: inline-block; width:120px; text-align: right; } User Name: <input type="text" id="uid" name="uid" size="10" maxlength="20" placeholder="Your id" /><br /> Password: <input type="password" id="pwd" name="pwd" size="12" maxlength="20" /><br /> <span class="frmTxt">User Name:</span> <input type="text" id="uid" name="uid" size="10" maxlength="20" placeholder="Your id" /><br /> <span class="frmTxt">Password:</span> <input type="password" id="pwd" name="pwd" size="12" maxlength="20" /><br /> .frmTxt { display: inline-block; width:120px; text-align: right; }

設定元素堆疊順序 z-index屬性 z-index值越高者，堆疊越上面 p { border: 2px solid blue; color: red; font-size: 36px; position: absolute; height: 120px; } <p style="z-index: 1; top: 20px; left: 20px; background-color: yellow;">元素 1 : z-index = 1 </p>