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

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

希望这可以帮助 ：）