<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ width: 100%; } /* 版心 */ .container{ width: 1200px; height: 2000px; background-color: rgb(172, 167, 167); margin:0 auto; text-align: center; } .content{ margin:0 auto; width: 900px; height: 1700px; background-color: gold; } .left_btn{ position: fixed; top:50%; width: 50px; height: 200px; line-height: 200px; /* 使用margin 不用 left， 相对于父级版心定位*/ margin-left: 50px; /* left:50px; */ background-color: red; } .right_btn{ position: fixed; top:50%; width: 50px; height: 200px; line-height: 200px; /* 使用margin 不用 right， 相对于父级版心定位*/ margin-left: 1100px; /* right: 50px; */ background-color: red; } </style> </head> <body> <div class="container"> <div class="content">内容</div> <div class="left_btn">a</div> <div class="right_btn">b</div> </div> </body> </html>
position fixed 左右使用margin 可相对于父级定位