如何调整所以图像覆盖滑块

Question

希望在<div class="float-left">区域放置一个230x200的图像，使其略微覆盖在滑块上。例如http://screencast.com/t/Jo9zYjnllHZ

在网站http://tinyurl.com/njencjc中，有一个CSS连接滑块和放置徽标的标题区域

.show-rev-slider #header .slider {
height: 380px;
-webkit-transform: translate3d(0, 0, 0);
}

这会是CSS添加还是需要PHP？任何帮助将不胜感激。

Answer 1

徽标和滑块都在方框中，例如：

如果您尝试在滑块顶部覆盖徽标，您需要做的就是找出滑块使用的z-index，这是控制网站内盒子级别的css。滑块使用它将每个图像放在彼此的顶部，以允许滑块工作。你需要让z-index级别高于滑块的最高级别才能始终位于顶部...

Answer 2

这是您的代码：jsFiddle

• 这只是css方式来做到这一点！

• 只需在滑块div和position内添加叠加 div！

• 注意 - 您可以更改尺寸！在代码维度中仅用于演示目的！

<强> HTML

---

 <div class="slider">
    <div class="overlay"></div>
    <img src="http://s28.postimg.org/uut7yirrx/00000472.png">
 </div>

<强> CSS

---

    .slider {
        position:relative;
        border:1px solid #07a;
        margin:75px 50px;
    }
    .overlay {
        position:absolute;
        height:100px;
        width:178px;
        border:5px solid red;
        top:-58px;
    }

图片SnapShot

---