添加div标签上的幻灯片

Question

如何，我们可以在一个幻灯片下面的链接

http://www.hellofresh.com/

这里div标题为“烹饪发现JOY”加入div标签一样被放置在幻灯片。

我该怎么做？

Answer 1

好吧，你可以做这样的事情（http://jsfiddle.net/YgpqX/）：

<div class="div1"></div> 
<div class="div2"></div>​ 

​.div1 { 
    width: 320px; 
    height: 200px; 
    background: #aa5; 
} 

.div2 { 
    width: 100px; 
    height: 100px; 
    margin-top: -200px; 
    background: #5aa; 
} 
​ 

或（http://jsfiddle.net/YgpqX/1/）

<div class="div1"></div> 
<div class="div2"></div>​ 

.div1 { 
    position: relative; 
    width: 320px; 
    height: 200px; 
    background: #aa5; 
} 

.div2 { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    top: -200px; 
    background: #5aa; 
} 

如果您在HTML块应该更早则滑块，然后使用z-index: 9999;得到它。

而且还abolute位置：

<div class="div1"> 
    <div class="div2"></div> 
</div> 
​ 
.div1 { 
    position: relative; 
    width: 320px; 
    height: 200px; 
    background: #aa5; 
} 

.div2 { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: #5aa; 
} 

Answer 2

通过CSS

设置opacity属性这是在这一个W3schools Css opaque

Answer 3

他们完成使用CSS定位这个效果的一些基本信息。基本上，他们绝对把发现烹饪块的乐趣定位在幻灯片上。你可以在绝对位置div上使用z-index来将它放在相对位置（幻灯片）div上。基本上你需要使用position和z-index的组合。我有CSS/HTML这里的一个基本的例子：http://jsfiddle.net/jqVAe/1/

HTML：

<div id="slideshow"> 
    Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here. Scrolling sideshow goes here.Scrolling sideshow goes here. 
    <div id="over-slideshow"></div> 
</div> 

CSS：

#slideshow{ 
     width: 400px; 
     height: 200px; 
     position: relative; 
     background: green;  
    } 

#over-slideshow{ 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 100px; 
    height: 100px; 
    background: red;  
} 

这就提供了把你的幻灯片的基本结构。我会建议找到一个好的幻灯片插件，而不是试图重塑功能。我相信有很多Jquery（Javascript框架）插件可以为你完成这个任务。

Answer 4

首先，欢迎来到Stackoverflow（oops;这不是你的第一个问题！）。将div放在幻灯片上（或通过任何其他元素）的关键是使用绝对定位。绝对定位使您可以指定元素的确切位置，而不是将其与文档流保留在一起。如果你看看your example website的CSS，你可以看到，具有div‘体验烹饪的乐趣’的基本风格是这样的：

position: absolute; 
top: 0px; 
left: 0px; 

top和left行为在某种程度上就像一个x和y二维网格系统，除了原点放置不同。 top: 0px;拉div和left: 0px;拉div左，所以总而言之，它被放置在左上角。

要达到半透明黑色的效果，请使用opacity属性。 opacity: 0.5;表示div是半透明的，而opacity: 0;表示根本不可见。您最喜欢的值可能是opacity: 0.7; - 范围0...1中的任何值。

这里的最后一部分是告诉浏览器div应该是而不是幻灯片放映，而不是它的后面。要做到这一点，请使用z-index属性。 z-index指定元素的相对“堆栈顺序”。因此，如果您希望您的div超过幻灯片放映，请使用z-index: 5;进行设计，例如，使用z-index: 1;对幻灯片进行造型。

希望有所帮助！

Answer 5

您可以尝试position: absolute和z-index。 z索引用于对齐图层上方或下方的图层。你可以通过;

Lesson 15: Layer on layer with z-index (Layers)，Understanding CSS z-index，并A Detailed Look at the z-index CSS Property