CSS - Оверлей изображения изображения в хроме и опера, но не отображается в firefox

Question

У меня есть это изображение, которое я отобразил над слайдером на моей странице Wordpress. Он работал нормально до тех пор, пока я не сменил макет:/

Я понятия не имею, почему, но теперь я могу видеть это изображение только в хроме и в опере. Я тестировал его в firefox и IE (тьфу) тоже, и он не работает в этих! Не изменил код вообще. Это похоже на более старый макет, но как-то он больше не работает.

---

Оба ползунка и изображение находятся в том же районе виджетов. Изображение с классом находится в текстовом виджете.

Редактировать: проверено сейчас на двадцать двенадцать темы, имеет такую ​​же проблему, но в двадцать одиннадцати темах она работает так, как должна.

#text-widget-4 { 
    background-color: transparent; 
    position: absolute; 
    top: 0px; 
    margin: -50px !important; 
    padding: 0px; 
} 

.slider-overlay { 
    position: absolute; 
    top: 120px; 
    left: 50px; 
    z-index:10; 
    border: none !important; 
} 

.meteor-slides-widget { 
    position: relative; 
    padding: 0px; 
} 

---

Это то, что я вижу из поджигатель.

<div class="row"> 
<header id="required-header" class="twelve columns required-header" role="banner"> 
    <aside id="meteor-slides-widget-1" class="widget meteor-slides-widget"> 
    <div id="meteor-slideshowheader" class="meteor-slides header 
     navnone { next: '#meteor-  nextheader', prev: '#meteor-prevheader', 
     pager: '#meteor-buttonsheader' }" > 
    </div> 
    </aside> 

    <aside id="text-4" class="widget widget_text"> 
    <div class="textwidget"> 
     <img class="slider-overlay" src="http://postimage.org/blahblah/image.png"/> 
    </div> 
    </aside> 
     --couple more elements here: navigation and search form - not important-- 
</header> 
</div> 

Я хотел бы, чтобы избежать размещений кода, как на сервере (он же не из поджигателей), потому что он распространяется через различные файлы, как и во множественном числе. Если кто-то хочет, я могу дать ссылку на сайт через личное сообщение.

---

Заранее спасибо.

---

EDIT! ЭТО ФИКСИРОВАННАЯ!!

спасибо!

Так оно и было: Я переключил текстовый виджет на относительный и весь контент, проигнорировав все элементы над ним. Я сохранил его, а затем добавил еще один div до <div class="row">, а затем ему просто нужно было перемещаться с полями и отступом.

Answer 1

#text-widget-4 { 
    position: absolute; <!-- try making this relative 
    top: 0px; 
} 

.slider-overlay { 
    position: absolute; <!-- so that this can be positioned correctly 
} 

Возможно, #text-widget-4 становится скрывается за meteor-slides-widget, из-за его позиции абсолютной.

Я не очень уверен в этом, но дайте ему попробовать, тем не менее.