HTML&CSS基礎-絕對定位
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則將追究法律責任。
一.HTML源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>絕對定位</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; /** * 定位: * 定位指的就是將指定的元素擺放到頁面的任意位置，通過定位可以任意的擺放元素 * 通過 position屬性設置元素定位，常用有以下可選值: * static: * 默認值，元素沒有開啟定位 * relative: * 開啟元素的相對定位 * absolute: * 開啟元素的絕對定位 * fixed: * 開啟元素的固定定位(也是絕對定位的一種) * * */ /** * 當position屬性設置為absolute時，則開啟了元素的絕對定位,絕對定位有以下特點: * 1>.開啟絕對定位，會使元素脫離文檔流; * 2>.開啟絕對定位以后，如果不設置偏移量，則元素的位置不會發生變化; * 3>.絕對定位是相對於離他最近的開啟了定位的祖先元素進行定位的(一般清空下，開啟 了子元素的絕對定位都會同時開啟父元素的相對定位),如果所有的祖先元素都沒有開啟定位，則會相對於瀏覽器窗口進行定位， * 4>.絕對定位會使元素提示一個層級; * 5>.絕對定位會改變元素的性值，內聯元素變成塊元素，塊元素的高度和寬度默認都被內容撐開; */ position: absolute; left: 100px; top: 10px; } .box3{ width: 300px; height: 300px; background-color: deeppink; } .box4{ width: 300px; height: 300px; background-color: cornflowerblue; /*開啟box4相對定位*/ position: relative; } span{ /** * 開啟絕對定位后發現內聯標簽竟然有了塊標簽的性值啦，因為可以甚至寬和高 */ position: absolute; width: 500px; height: 100px; background-color: greenyellow; } </style> </head> <body> <div class="box1"></div> <div class="box4"> <div class="box2"></div> </div> <div class="box3"></div> <span>我是一個span標簽</span> </body> </html>
二.瀏覽器打開以上代碼渲染結果
