CODEWITHSUNDEEP
htmlcss
flavio
flavio

Reputation: 11

Positioning text on top of text

I have a font that has a fill and a shadow so they need to be used together, the fill on top and the shadow underneath. I've been able to layer over the other like so: link

I did this with relative and absolute positioning:

HTML:

 <h1 class="fill">TEXT</h1>
 <h1 class="shadow">TEXT</h1>

CSS:

.fill {
    font-family: "Tilastia-Fill";
    position: relative;
}

.shadow {
    font-family: "Tilastia-Shadow";
    position: absolute;
    bottom: 50%;
}

I'm struggling with preserving the right look when the orientation of the screen changes from portrait to landscape, especially when I include multiple lines of double stacked text. For example, when the orientation of the screen changes to landscape the result is: link

Obviously things have jumped around and there's something fundamental about positioning I'm not understanding.

Upvotes: 1

Views: 101

Answers (1)

Chiller
Chiller

Reputation: 9738

You can make them stick together by adding a parent div with a relative position

and make both text positioned according to this div with same css

this how the code should look like

div {
  position: relative;
}

.fill {
    font-family: "Tilastia-Fill";
    position: absolute;
    top:0;
    left:0;
}

.shadow {
    font-family: "Tilastia-Shadow";
    position: absolute;
    top:0;
    left:0;
    
}
 <div>
 <h1 class="fill">TEXT</h1>
 <h1 class="shadow">TEXT</h1>
 </div>

and if you want one to move a little more then the other you can play with left, right, top , bottom

and you should use pixels instead of %

and you can see an example of that HERE

Upvotes: 2

Related Questions