css定位及z-index的使用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css定位</title> <style> /*z-index数越大越靠顶层，数越小越靠底层*/ #div1{ width:200px; height:200px; background: rebeccapurple; position:absolute; top:20px; z-index: 2; } #div2{ width:200px; height:200px; background:black; position:relative; left:20px; z-index: 1; } #div3{ width:200px; height:200px; background:darkred; position:relative; left:30px; top: -80px; z-index: 0; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <script> <!--显示从1到99上下排列--> for( var i=0;i<100;i++){ document.write(i+"<br/>") } </script> </body> </html>
z-index可取负值，负值越大表示越靠底层:
<html> <head> <style type="text/css"> body{ color:red; } img { position:absolute; top:0; left:0; z-index: -1; } </style> </head> <body> <h1>This is a heading</h1> <img src="../../image/1.gif" /> <p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p> </body> </html>