css点播图 图片显示错误

问题遇到的现象和发生背景

自己制作网页css轮播图，图片卡成一条线，因为没学js只能弄css做了

问题相关代码，请勿粘贴截图

<div class="boxset">
              <input type="radio" name="r" id="r1" value="checked" />
              <input type="radio" name="r" id="r2" value="" />
              <div class="box1 box">1</div>
              <div class="box2 box">2</div>    
              
           </div>
           <div class="buttonset">
               <label for="r1" class="button">first</label>
               <label for="r2" class="button">second</label>
           </div>

.box1
{
    background: url(../../img/5acae9f261a944653934caab1fc564cc.jpeg)no-repeat;
    background-size: 100%;
}
.box2
{
    background: url(../../img/30f85bebe8d7832bf221384c8872e64a.jpeg)no-repeat;
    background-size: 100%;
}
.buttonset
{
    position:absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;
}
.button
{
    width: 50px;height: 30px;border: 2px solid white;margin: 6px;cursor: pointer;z-index: 10;
}
.button:hover
{
   background: white;transition: .4s;
}
.input[name="r"]{position: absolute;visibility: hidden;}
.boxset{width: 500%;height: 100%;display: flex;}
.box{width: 20%;transition: 1s;}
#r1:checked~.box1{margin-left: 0;}
#r2:checked~.box1{margin-left: -20%;}
运行结果及报错内容

可以正常运行，但是图片加载的错误，raido按钮在左边，不能悬浮到中间下方

我的解答思路和尝试过的方法

给图片设宽高，一旦设置就乱码了，

我想要达到的结果

图片在中间，按钮在图片下方，正常的点播图形式。不乱就行

.input[name="r"]{position: absolute;visibility: hidden;}样式写错了。

去掉前面的点，看css是为了隐藏radio，并不是为了显示出来。
有帮助或启发麻烦点下【采纳该答案】

望采纳 ^.^
给父元素设置相对定位relative，它的子元素再设置绝对定位absolute，那么子元素绝对的定位的基准点就变成了其父元素的左上角
所以给轮播图盒子设置relative，radio设置absolute，就能定位到轮播图盒子的下边中间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        .box1
        {
            background: url(https://img2.baidu.com/it/u=3858091215,487434000&fm=26&fmt=auto)no-repeat;
            background-size: 100%;
            margin-left: 50%;
            transform: translateX(-50%);
        }
        .box2
        {
            background: url(https://img2.baidu.com/it/u=430931311,117062100&fm=26&fmt=auto)no-repeat;
            background-size: 100% 100%;
        }
        .buttonset
        {
            position:fixed;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;
        }
        .button
        {
            width: 50px;height: 30px;border: 2px solid white;margin: 6px;cursor: pointer;z-index: 10;
        }
        .button:hover
        {
           background: white;transition: .4s;
        }
        .radio{position: absolute;bottom: -50px;right: 50%;transform: translateX(-50%) ;}
        .boxset{width: 100%;height: 200px;display: flex;position: relative;}
        .box{width: 20%;height: 100%;transition: 1s;}
        #r1:checked~.box1{margin-left: 50%;transform: translateX(-50%);}
        #r2:checked~.box1{margin-left: 30%;transform: translateX(-50%);}
         
        </style>
    </head>
    <body>
        <div class="boxset">
                      <input type="radio" name="r" class="radio" id="r1" value="checked" />
                      <input type="radio" name="r" class="radio" id="r2" value="" />
                      <div class="box1 box">      
                      </div>
                      <div class="box2 box">
                         
                      </div>    
                      
                   </div>
                   <div class="buttonset">
                       <label for="r1" class="button">first</label>
                       <label for="r2" class="button">second</label>
                   </div>
    </body>
</html>

额这个问题来自我是什么鬼