使用position屬性對DIV進行佈局
相對定位與絕對定位
#定位標籤：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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
CSS 佈局屬性最佳化技巧：position sticky 和 flexbox
Oct 20, 2023 pm 03:15 PM
CSS版面配置屬性最佳化技巧：positionsticky和flexbox在網頁開發中，版面是一個非常重要的面向。良好的佈局結構可以提高使用者體驗，使頁面更加美觀和易於導航。而CSS佈局屬性則是達成此目標的關鍵。在本文中，我將介紹兩種常用的CSS佈局屬性最佳化技巧：positionsticky和flexbox，並提供特定的程式碼範例。一、positions
H5中position屬性的靈活運用技巧
Dec 27, 2023 pm 01:05 PM
H5中如何靈活運用position屬性在H5開發中，常會涉及到元素的定位和佈局問題。這時候，CSS的position屬性就會發揮作用。 position屬性可以控制元素在頁面中的定位方式，包括相對定位（relative）、絕對定位（absolute）、固定定位（fixed）和黏附定位（sticky）。本文將詳細介紹在H5開發中如何靈活運用position屬性
html怎麼把div放在底部
Mar 02, 2021 pm 05:44 PM
html把div放在底部的方法：1.使用position屬性將div標籤相對於瀏覽器視窗進行定位，語法「div{position:fixed;}」；2、設定到底部距離為0來把div永遠放置於頁面底部，語法“div{bottom:0;}”。
h5如何使用position
Dec 26, 2023 pm 01:39 PM
在H5中使用position屬性可以透過CSS控制元素的定位方式：1、相對定位relative，語法為「style="position: relative;」；2、絕對定位absolute，語法為「style="position: absolute; 」；3、固定定位fixed，語法為「style="position: fixed;」等等。
position有哪些屬性
Oct 10, 2023 am 11:18 AM
position屬性取值有static、relative、absolute、fixed和sticky等。詳細介紹：1、static是position屬性的預設值，表示元素按照正常的文檔流進行佈局，不進行特殊的定位，元素的位置由其在HTML文檔中的先後順序決定，無法透過top、right、bottom和left屬性進行調整；2、relative是相對定位等等。
css如何清除position
Oct 07, 2023 pm 12:02 PM
css清除position的方法：1、使用static屬性，可以設定為static來清除position屬性；2、使用inherit屬性，可以清除元素的position屬性，並繼承父元素的position屬性；3、使用unset屬性，將屬性恢復為其預設值，並清除元素的position屬性；4、使用!important規則，將覆蓋其他樣式規則，並清除position屬性等等。
CSS 層疊屬性解讀：z-index 和 position
Oct 20, 2023 pm 07:19 PM
CSS層疊屬性解讀：z-index和position在CSS中，佈局和樣式的設計是非常重要的。而在設計中，常需要對元素進行層疊與定位。兩個重要的CSS屬性，即z-index和position，可以幫助我們實現這些需求。本文將深入探討這兩個屬性並提供具體的程式碼範例。一、z-index屬性z-index屬性用來定義元素在垂直方向上的堆疊順序。元素的層疊
在H5開發中常見的position屬性的應用場景
Dec 27, 2023 am 10:08 AM
H5開發中position屬性的常見應用場景，需要具體程式碼範例在H5開發中，CSS的position屬性非常重要，它控制元素在網頁中的定位方式。透過合理應用position屬性，我們可以實現頁面佈局的靈活性和美觀性。在本文中，我們將介紹position屬性的常見應用場景，並透過具體的程式碼範例來說明。 Static（靜態定位）：position屬性的預設值為st
