CSS Text Overlap

By  on  

One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. By using the above spacing properties and the z-index "layering" property, we can make your elements overlap each other.


<div id="element-1" class="element">David</div>
<div id="element-2" class="element">Walsh</div>
<div id="element-3" class="element">Blog</div>
<div id="element-4" class="element">Showing</div>
<div id="element-5" class="element">CSS</div>
<div id="element-6" class="element">Overlap</div>

Just a bunch of elements with text only. Simple.


.element		{ font-size:75px; position:absolute; }
#element-1		{ color:lightblue; z-index:1; }
#element-2		{ color:lightgreen; margin:30px 0 0 30px; z-index:2; }
#element-3		{ color:pink; margin:60px 0 0 60px; z-index:3; }
#element-4		{ color:yellow; margin:90px 0 0 90px; z-index:4; }
#element-5		{ color:orange; margin:120px 0 0 120px; z-index:5; }
#element-6		{ color:gray; margin:150px 0 0 150px; z-index:6; }

/* worded colors? awful! */

The major players in the CSS are the absolute positioning, the margin property, and the z-index.

As lovely as the overlap is, CSS is still limited to the "safe" fonts, so text-only imagery is still necessary when we want to use "fun" fonts.

Recent Features

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations...

  • By
    MooTools onLoad SmoothScrolling

    SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...


  1. I’m pretty sure this isn’t using z-index, since you aren’t setting it anywhere. And since you’re not setting it, the elements are just being stacked according to document flow. If this is what you want then the position absolute is unnecessary. You can just use negative top margins to overlap the elements and get the added benefit of maintaining flow in case you want to put something else after these divs.

  2. Ditto,

    I was expecting to see something using Z-index and was going to see how compatible it is across various browsers.

  3. I created the original file and then forgot to update a few text items when I had concluded z-index wasn’t necessary. Don’t worry though — I have some Moo and jQuery that will really accentuate the z-index.

  4. Jeff Hartman

    # /* worded colors? awful! */

    Why are worded colors awful?

  5. Thank you so much for this code. I spent hours on working on something like this and came up with issues with text all over the place.

    This helped a lot.

  6. Using for a CANCELLED display. Thanks!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!