div元素（css）定位
阿新 • • 發佈：2018-12-16
1.定位：相對定位（position:relative）
<html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> </head> <body> <h2>我是標題</h2> <h2 class="pos_left">我是標題向左移動</h2> <h2 class="pos_right">我是標題向右移動</h2> </body>
效果就是： --------------------------------我是標題-------------------------------- -----------------------------我是標題向左移動------------------------ ----------------------------------我是標題向右移動------------------- 2.絕對定位（position:absolute）
<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">我是絕對定位的標題</h2> </body> </html>
效果： ·--------------------------------------------- · · · ·············我是絕對定位的標題 · ·
3.固定定位（position:fixed;）
<html> <head> <style type="text/css"> p.one { position:fixed; left:5px; top:5px; } p.two { position:fixed; top:30px; right:5px; } </style> </head> <body> <p class="one">我是1在這。</p> <p class="two">我是2在這。</p> </body> </html>
效果：
·······我是1在這。 ···········································································································我是2在這。
其他的根據padding和margin去控制、精確位置。