1.加个div把图片和文字包在一起; 2.父级div设置相对定位,文字所属div采用绝对定位,并设置较高层级. 参考:
<div style="position:relative;width:100px;height:100px;"> <img src="" alt="" /> <div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;"> 文字 </div> </div> <!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>文字悬浮在图片上方</title> <style> .box { position: relative; width: 600px; height: 400px; border: 4px solid red; } .box .img { width: 356px; height: 366px; margin-bottom: 10px; float: right; position: relative; } img { position: absolute; top: 0; left: 0; opacity: 0.4; width: 100%; display: none; } .btn { color: brown; font-size: 30px; } .content { position: absolute; width: 540px; height: 320px; margin: 30px; left: 0; top: 0; border: 3px solid blue; } </style> </head> <body> <div class="box"> <div class='img'> <img src="./test.jpg" alt="" srcset=""> <button class='btn'>click</button> </div> <div class="content"> 11111111111111111111111111111111111111111111111111111111111111111</div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function () { $('.btn').on('click', function () { $('img').css('display', 'block') }) }) </script> </body> </html>