Css 为什么在显示绝对定位图像时会出现错误？

这是我的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;
}

---

我不明白为什么右箭头会出现在最下面一行，以及我如何修复它。

您的JSFIDLE不会复制这个问题，但是从查看您的代码和您在这里发布的信息来看，我建议您尝试一些方法

首先，绝对定位只有在父div的定位设置为相对时才能正常工作，您没有这样的设置，所以请尝试将父div（我认为它被称为panel）设置为position:relative

您已将箭头声明为绝对定位的项目，但未实际定位它们。。。试试像这样的东西

.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;
}

试用

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

而不是

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

我不明白你为什么这么做，有什么特别的原因吗

---

希望这对您有所帮助：）

在上发布演示。如果您将整个文档粘贴到JSFIDLE中，则另一个文档的body元素中会有一个文档，因此它会中断。