定位的CSS样式.pptVIP

設定元素堆疊順序 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 * 定位的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 DLNAbr / 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 p id=overview Today, more than 245 companies comprise DLNA, all brands that you know. They include consumer electronics, computer … /p 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 p img src=bird.jpg alt= style=float: left; / 根據CSS的排版模型，在正常版型(normal flow)中，文字元素是由上而下，由左而右的， /p h2 style=clear: left;清除左邊的浮動元素/h2 設定定位類型 position屬性 static | relative | absolute | fixed static (靜態): 依照出現順序排列(預設) relative (相對): 新位置相對於原來排版之位置，移動一個相對位置 但原始空間仍保留。 absolute (絕對): 新位置相對於其包容區塊 元素從原排版抽離 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;/ img … style=position: absol