<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .warp{ width: 1200px; height: 1000px; background:blue; margin:0 auto; } #div1{ width: 100px; height: 100px; background:red; position: absolute; top:0; left:0; margin-left: 30px; } #div2{ width: 800px; height: 200px; /*margin: 20px;*/ background: yellow; position: absolute; } </style> </head> <body> <div class="warp"> <div id="div1">x1x2x3x4x5x6x7x8</div> <div id="div2">yyyyyyyyyyyyyyy</div> </div> </body> </html>
这样可以做成两个内容打印的时候在一起,在页面上显示的时候是分离的,想要使那个页面定位在上边可以使用z-index属性