HTML筆記6—定位
阿新 • • 發佈：2020-07-16
相對定位
<!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; /*設定一個margin-left*/ /* margin-left: 200px; */ /*設定一個margin-top*/ /* margin-top: 200px; */ /* 定位: -定位指的就是將指定的元素擺放到頁面的任意位置 通過定位可以任意的擺放元素 -通過position屬性來設定元素的定 位 -可選值: static:預設值元素沒有開啟定位 relative:開啟元素的相對定位 absolute:開啟元素的絕對定位 fixed:開啟元素的固定定位( 也是絕對定位的一種)*/ /* 當元素的position屬性設定為relative時，則開啟了元素的相對審位 1.當開啟了元素的相對定位以後，而不設定偏移量時，元素不會發生任何變化 2.相對定位是相對於元素在文件流中原來的位置進行定位 3.相對定位的元素不會脫離文件流 4.相對定位會使元素提升一個層級 5.相對定位不會改交元素的性質，塊還是缺，內聯還是內聯*/ position: relative; /* 當開啟了元素的定位(position屬性值是一個非static的值)時， 可以通過left right top bottom四個屬性來設定元素的偏移量 left:元素相對於其定位位置的左側偏移量 right:元素相對於其定位位置的右側偏移量 top:元素相對於其定位位置的上邊的偏移量 bottom:素相對於其定位位置下邊的偏移量 通常偏移量只需要使用兩個就可以對一個元素進行定位 一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進行定位 */ left: 100px; top: 200px; } .box3 { width: 200px; height: 200px; background-color: yellowgreen; /*設定一個margin-top*/ /* margin-top: -200px; */ } .s1 { position: relative; width:200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span class="s1">我是一個span</span> </body> </html>