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