position的 relative+absolute实现固定标签在窗口的某个位置

时间：2022-11-02 16:29:27
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div style="border: 1px solid red;width: 500px;height: 280px;margin: 0 auto;position: relative">

     <div style="background-color: black;width: 40px;height: 40px;position: absolute;right: 0;bottom: 0;color: white">

         <div style="line-height: 40px; text-align: center">哈哈</div>

     </div>

 </div>

 <div style="border: 1px solid red;width: 500px;height: 280px;margin: 0 auto;position: relative">

     <div style="background-color: black;width: 40px;height: 40px;position: absolute;left: 0;top: 0;color: white">

         <div style="line-height: 40px; text-align: center">哈哈</div>

     </div>

 </div>

 </body>

 </html>

效果如下图

position的 relative+absolute实现固定标签在窗口的某个位置

相关文章