HTML學習筆記 css定位（靜態，相對，固定，絕對布局）偏移案例 第十二節 （原創） 參考使用表
阿新 • • 發佈：2018-06-05
absolute write style 用戶 學習 nbsp -c code posit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位（靜態，相對，固定，絕對布局）小廣告案例</title> <link rel="stylesheet" href="tzy.css" type="text/css"> </head> <body> <div id="position1"></div> <script>for(var i=0;i<10;i++){ document.write(i+"<br/>"); } </script> <div id="position2"></div> <script> for(var i=10;i<20;i++){ document.write(i+"<br/>"); } </script> <div id="position3"></div> <script> for(var i=20;i<50;i++){ document.write(i+"<br/>"); } </script> <br/><br/><br/><br/><br/> <div id="position4"></div> <script> for(var i=30;i>0;i--){ document.write(i+"<br/>"); } </script> <div id="position5"></div> <div id="position6"></div> </body> </html>
#position1{ width: 100px; height: 100px; background-color: mediumturquoise; position: relative; /*相對布局(無變化)*/ left:2px; /*向左偏移*/ } #position2{ width: 100px; height: 100px; background-color: mediumturquoise; position: absolute; /*絕對布局(無變化)*/ left:10px; /*向左偏移*/ } #position3{ width: 100px; height: 100px; background-color: forestgreen; position: fixed; /*固定布局(無變化)*/ z-index: 2; /*值大的更靠近用戶*/ } #position4{ width: 100px; height: 100px; background-color: mediumturquoise; position: static; /*靜態布局(無變化)*/ right: 100px; /*向右偏移100px*/ left:20px; /*向右偏移*/ /*偏移無用*/ } #position5{ width: 100px; height: 100px; background-color: mediumturquoise; position: relative; /*相對布局(無變化)*/ top: 20px; /*向上偏移100px*/ left:20px; /*向左偏移*/ z-index: 2; /*值大的更靠近用戶*/ } #position6{ width: 100px; height: 100px; background-color: coral; position: relative; /*相對布局(無變化)*/ left:10px; /*向左偏移*/ z-index: 1; /*值大的更靠近用戶*/ } /*靜態無法被控制 其他的都可以*/
HTML學習筆記 css定位（靜態，相對，固定，絕對布局）偏移案例 第十二節 （原創） 參考使用表