爲什麼在顯示絕對定位圖像時出現錯誤？

這裏是我的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;

}

enter image description here

內容是裏面的包裝用CSS：

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

爲什麼右箭頭的推移下，我沒有得到它行，我該如何解決它。

來源

2012-10-27 Rachit Mishra

在http://jsfiddle.net上發佈演示。 – Blender

http://jsfiddle.net/rachit_rm/KgNbN/embedded/result/ –

如果您將整個文檔粘貼到jsfiddle中，您將在另一個文檔的body元素中有一個文檔，所以它會中斷。 – Guffa

您的JsFiddle不會複製問題，但從查看您的代碼和您在此發佈的信息我建議您嘗試幾件事情。

首先絕對定位只有正常工作時的父div的定位設置爲相對的，你沒有這個這麼試試你的父母DIV（我認爲這是所謂面板）設置的位置是：相對的;

你已經宣佈你的箭絕對定位的項目，然後並不實際定位他們...嘗試像

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

我不明白你爲什麼這麼做，有沒有特別的原因？

希望這會有所幫助:)

來源

2012-10-28 09:51:36 Crin

我真的解決了這個問題。讓我發佈代碼。 –

爲什麼在顯示絕對定位圖像時出現錯誤？

回答

相關問題