Question

How we can add a div tag over a slideshow like in the following link

http://www.hellofresh.com/

Here the div with title “DISCOVER THE JOY OF COOKING ” is placed over a slideshow.

How might I do this?

Answer 1

Ok, you can do something like this ( 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;
}
​

Or ( 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;
}

​And if your block in html should be earlier then slider block, then use z-index: 9999; to get it up.

And also abolute position:

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