css - 为什么显示绝对定位的图片会出错？

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 的定位设置为 relative 时才能正常工作，你没有这个所以尝试将你的父 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>

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

希望这有帮助:)