CODEWITHSUNDEEP
htmlcss
EarlyEarthworm
EarlyEarthworm

Reputation: 41

How do I make an HTML element come on top of the other?

I have a css3 moving clouds background like this one for my site.

However, the clouds keep coming on top of the text and I cannot see any text when they hover over it. Is there a way to make these elements come on top of the clouds?

Upvotes: 0

Views: 464

Answers (1)

John Dvorak
John Dvorak

Reputation: 27277

If your HTML structure is like this:

<div id="sky-container">
  <div id="cloud-container">
    ...
  </div>
</div>
<div id="text-container">
  ...
</div>

congratulations, you're already done, you just need to position them correctly (absolute positioning). The text should already appear above the clouds. If your HTML is like this:

<div id="cloud-container">
  ...
</div>
<div class="background">
  <div class="background">
     <div class="text">
        ...
     </div>
  <div class="text">
    ...
  </div>
  ...
</div>

i.e. if you don't have a single background, you can still insert the clouds between the background and the text. You just need to separate the background from the text in the HTML. You can use a z-index to place the clouds between the text and the background:

.background{
  z-index:0;
}
#cloud-container{
  z-index:1;
}
.text{
  z-index:2;
}

Since the default z-index is 0, if you know the cloud container will be the last element on the page (and is the one that gets position:absolute), you can simplify the CSS to:

.text{
  z-index:1;
}

An element with a z-index also needs to have its position property explicitly set to absolute, relative or fixed.

Upvotes: 2

Related Questions