这段代码为什么a标签的位置是在图片右上角

<!DOCTYPE HTML>
<html lang="zh">
   <head>
      <meta charset="UTF-8">
      <title>标题</title>
      <style>
         * {
            margin: 0;
            padding: 0;
         }
         
         .c1 {
            height: 360px;
            margin: 40px auto;
            width: 650px;
         }
         
         .btn {
            border: 2px solid #000000;
            height: 40px;
            position: absolute;
            width: 40px;
         }
      </style>
   </head>
   <body>
      <div class="c1">
         <img alt="1" src="images/gugong.jpg">
         <a class="left_btn btn"></a>
         <a class="right_btn btn"></a>
      </div>
   </body>
</html>

DanielDu87 2021-11-15

源自：浮动与定位 3-8 绝对定位（2）

收起

2回答

好帮手慕久久回答被采纳获得+3积分 2021-11-19 11:16:58

同学你好，当绝对定位元素没有设置left、top等方位属性时，浏览器会自动安排它的位置，一般会挨着前面元素往后布局。在同学的代码中，a标签挨着图片，因此会在图片右侧显示（图片右侧有位置，就在有位置的部分排布）。这种自动排布的位置，大多情况并不是我们想要的，而且可能不同的浏览器排布方式还不同，因此绝对定位元素一定要手动设置left、top等值，人为规定好它的位置。

祝学习愉快！

收起回答