CODEWITHSUNDEEP
css
user5461057
user5461057

Reputation:

HTML CSS How to Overlay Text on More Text

Link to CodePen: http://codepen.io/anon/pen/xqGVKv

The objective is to try and place "welcome" behind, "home". I am not sure how to do this. I have tried setting position, but I cant seem to get it to work.

html:

<div class="head">
  <h1>welcome</h1>
  <h2 id='overlay'>HOME</h2>
</div> <!--end class head -->

Upvotes: 0

Views: 2820

Answers (2)

Theo Orphanos
Theo Orphanos

Reputation: 1447

You should specify "absolute" position for your elements, and for the one that you want to be on the top of the other, just give it a higher "z-index" :)

try this css:

h1{
  font-size:50px;
  color:red;
  position:absolute;
  z-index:2;
}
h2{
  font-size:60px;
  color:green;
  position:absolute;
  z-index:3;
}

Fiddle here: https://jsfiddle.net/captain_theo/v7bv3h7f/1/

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

Add position: relative to the parent, then absolutely position home over welcome. And removing the default margins will make them overlap better.

* {margin:0;}

.head {
  font-size: 18px;
  color: blue;
  position: relative;
}

#overlay {
  color: red;
  font-size: 90px;
  position: absolute;
  top: 0; left: 0;
  margin: 0;
}
<div class="head">
  <h1>welcome</h1>
  <h2 id='overlay'>HOME</h2>
</div> <!--end class head -->

Upvotes: 1

Related Questions