萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 相對定位和絕對定位
相對定位和絕對定位
定位標簽：position
包含屬性：relative（相對）
absolute（絕對）
1.position:relative; 如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設置垂直或水平位置，讓這個元素"相對於"它的原始起點進行移動。（再一點，相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其他框）
2.position:absolute; 表示絕對定位，位置將依據浏覽器左上角開始計算。 絕對定位使元素脫離文檔流，因此不占據空間。普通文檔流中元素的布局就像絕對定位的元素不存在時一樣。（因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。）
3.父容器使用相對定位，子元素使用絕對定位後，這樣子元素的位置不再相對於浏覽器左上角，而是相對於父窗口左上角
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { padding:20px;}
a { color:#00f; text-decoration:none;}
a:hover { color:#f60; position:relative; top:1px; left:1px;}
#layout { width:600px; margin:0 auto; background:#eee; position:relative;}
#new { position:absolute; top:-15px; left:140px;}
</style>
</head>
<body>
<div id="layout">
<div id="new"><img src="http://www.zhuna.cn/images/new.gif" /></div>
這裡是內容<a href="#">這裡是鏈接</a>這裡也是內容</div>
</body>
</html>
DivCSS教程排行
相關文章
copyright © 萬盛學電腦網 all rights reserved