微信公佈 6 月朋友圈十大謠言：一半與新冠病毒和疫苗相關
阿新 • • 發佈：2021-06-30
<!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屬性設定為relative，開啟相對定位*/ /* 1 開啟了元素的相對定位以後，不設定偏移量時，元素不會發生改變 2 相對定位是相對於元素在文件流中原來的位置進行定位 3 相對定位的元素不會脫離文件流 4 相對定位會使元素提升一個層級 5 相對定位不會改變元素性質，塊還是塊，內聯還是內聯*/ position: relative; /* 開啟了元素定位（position屬性值時一個非static的值）時 可以通過left right top botttom四個屬性設定元素的偏移量 left：元素相對於其定位位置的左側偏移量 right：元素相對於其定位位置的右側偏移量 top：元素相對於其定位位置的上方偏移量 bottom：元素相對於其定位位置的下方偏移量 通常偏移量只需使用兩個就可以對一個元素進行定位 一般會選擇水平方向偏移量和垂直方向偏移量對一個元素定位 */ left: 200px; top: 200px; } .box3{ width: 200px; height: 200px; background-color: yellowgreen; } .s1{ width: 200px; height: 200px; background-color: yellow; position: relative; } </style> </head> <body> <!-- div.box$*3 快捷建立盒子 --> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span class="s1">我是span</span> </body> </html>
定位
指的是將指定元素擺放到頁面的任意位置
通過定位可以任意擺放元素
通過position屬性設定元素定位
可選值：
static 預設值 元素沒有開啟定位
relative 開啟元素相對定位
absolute 開啟元素絕對定位
fixed 開啟元素固定定位（也是絕對定位的一種）
*/
/*當元素的position屬性設定為relative，開啟相對定位*/
/*
1 開啟了元素的相對定位以後，不設定偏移量時，元素不會發生改變
2 相對定位是相對於元素在文件流中原來的位置進行定位
3 相對定位的元素不會脫離文件流
4 相對定位會使元素提升一個層級
5 相對定位不會改變元素性質，塊還是塊，內聯還是內聯
開啟了元素定位（position屬性值時一個非static的值）時
可以通過left right top botttom四個屬性設定元素的偏移量
left：元素相對於其定位位置的左側偏移量
right：元素相對於其定位位置的右側偏移量
top：元素相對於其定位位置的上方偏移量
bottom：元素相對於其定位位置的下方偏移量
通常偏移量只需使用兩個就可以對一個元素進行定位
一般會選擇水平方向偏移量和垂直方向偏移量對一個元素定位