day50——CSS 定位
阿新 • • 發佈：2018-02-05
正常 pre text 定位 right alt 生成 inf day5
<position>標簽用於對元素進行定位，也就是定義元素的位置
相對定位：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 h2.left { 6 position: relative; # relative用於生成相對定位的元素 7 left: -20px; # 表示相對於正常位置左偏移20px 8 } 9 h2.right { 10 position: relative; # relative用於生成相對定位的元素 11 left: 20px; # 表示相對於正常位置右偏移20px 12 } 13 </style> 14 </head> 15 16 <body> 17 <h2> 正常位置 </h2> 18 <h2 class="left"> 向左偏移 </h2> 19 <h2 class="right"> 向右偏移 </h2> 20 </body> 21 </html>
絕對定位
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 h2 { 6 position: absolute; # absolute用於生成絕對定位的元素 7 left: 100px; # 表示距離最左邊100px 8 top: 150px; # 表示距離最上邊150px 9 } 10 </style> 11 </head> 1213 <body> 14 <h2> Hello World </h2> 15 </body> 16 </html>
day50——CSS 定位