为什么显示绝对定位图像时出错？

Question

这是我的css

.arrow_l, .arrow_r {
    -moz-transition: opacity 0.5s ease 0s;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px #aeaeae;
    height: 60px;
    margin-top: 80px;
    position: absolute;
    width: 36px;
    opacity:.75;
}
.arrow_l {
    background: url("../images/arrow.png") no-repeat 10px center,red;
    background-size: 116% auto;
}
 .arrow_r {
    background: url("../images/arrow.png") no-repeat -15px center,red;
    background-size: 116% auto;
    margin-left:-36px;

}

内容在css：

的包装内

.wrapper {
    display: inline-block;
    padding: 12px;
}

我不明白为什么右箭头位于底行，我该如何修复它。

Answer 1

您的JsFiddle不会复制问题，但是通过查看您的代码以及您在此处发布的信息，我建议您尝试一些事情。

1. 首先，当父div的定位设置为相对时，绝对定位才能正常工作，你没有这个，所以尝试将你的父div（我认为它被称为面板）设置为position：relative;

2. 您已将箭头声明为绝对定位的项目，然后实际上没有将它们定位...尝试类似

   .arrow_l {
       background: url("../images/arrow.png") no-repeat 10px center,red;
       background-size: 116% auto;
       left:0px;
       top:25px;
   }
    .arrow_r {
       background: url("../images/arrow.png") no-repeat -15px center,red;
       background-size: 116% auto;
       margin-left:-36px;
       right:0px;
       top:25px;
   }
   

3. 尝试使用

   <div class="arrow_l"></div>
   

而不是

<span class="arrow_l"></span>

我不明白你为什么要这样做，有特殊原因吗？

希望这会有所帮助：）