Question

我在Wordpress页面中显示了滑块上显示的图像。它工作正常，直到我改变布局：/

我不知道为什么，但现在我只能在chrome和opera中看到那个图像。我在firefox和IE（ugh）中测试了它，它在那些不起作用！根本没有改变代码。它就像旧的布局一样，但不知何故它不再有效。

滑块和图像都位于相同的小部件区域中。带有类的图像位于文本小部件中。

编辑现在在二十二十二个主题上测试它有同样的问题，但在二十一个主题中它的工作方式应该如此。

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

这是我从firebug看到的。

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

我想避免在服务器上发布代码（也就是来自firebug），因为它通过不同的文件传播，如复数形式。如果有人想要我可以通过私人消息链接到该网站。

提前谢谢你。

修改！它已经固定!!

非常感谢!!

这是怎么回事：我将text-widget切换为相对内容，整个内容忽略了它上面的所有元素。我保留了它然后我在<div class="row">之前添加了另一个div然后它只需要一些边缘和填充的移动。

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后面，因为它位于绝对位置。

我对此并不十分确定，但还是试一试。

CSS - 覆盖图像显示在chrome和opera中但不在firefox中显示

1 个答案: