CSS 如何通過top left 定位控制div在另一個div的位置
阿新 • • 發佈：2017-12-24
src 技術 charset .com utf erb 效果 width left
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 /*div1一定要包容div2*/ 9 #div1{ 10 width:400px; 11 height:400px; 12 background-color:powderblue; 13 position:relative;/*相對定位*/ 14 } 15 #div2{ 16 width:100px; 17 height:100px; 18 background-color:red; 19 position:absolute;/*絕對定位*/ 20 bottom:100px; 21 right:100px; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="div1"> 27 <div id="div2"></div> 28 </div> 29 </body> 30 </html>
運行效果如下：
div1 Postion設置為relative（相對的）
div2 Position設置為absolute（絕對的）
div2在div1中就可以通過top left right bottom 來進行位置的定位
CSS 如何通過top left 定位控制div在另一個div的位置