使用position屬性對DIV進行佈局
- 怪我咯原創
- 2017-06-22 10:36:331809瀏覽
相對定位與絕對定位
#定位標籤：position
包含屬性:relative（相對） absolute（絕對）
1.position:relative; 如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然後透過設定垂直或水平位置，讓這個元素"相對於"它的原始起點進行移動。 （再一點，相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框）
2.position:absolute; 表示絕對定位，位置將依據瀏覽器左上角開始計算。 絕對定位使元素脫離文檔流，因此不佔據空間。普通文檔流中元素的佈局就像絕對定位的元素不存在時一樣。 （因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素並可以透過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。
4.相對定位和絕對定位需要配合top、right、bottom
、left使用來定位具體位置，這四個屬性只有在該元素使用定位後才生效，其它情況下無效。另外這四個屬性同時只能使用相鄰的兩個，不能即使用上又使用下，或即使用左，又使用右。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>testp.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="this is my page"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
window.onload = function(){
document.getElementById("myp").style.height = "200px";
}; </script>
</head>
<body>
关键因素：外层加position:relative,里面的p使用position: absolute，<br />
但这种方法的问题有：外层的p必须指定具体的height，高度不能使用百分比 <!-- <p style="position:relative;width: 600px;height:500px;">
<p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
</p> -->
<p id="myp" style="position:relative;width: 100%;height:auto;">
<p style="width: 100px;height: 50px; position: absolute;right:10px;bottom: 10px"></p>
<p style="width: 100px;height: 50px; position: absolute;left:10px;bottom: 10px"></p>
</p>
</body></html>
效果圖：
以上是使用position屬性對DIV進行佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn