Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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.

View Demo

The XHTML

<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.

The CSS

.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.

View Demo

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.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    pointer Media Query

    As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Discussion

  1. Caleb

    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. Dwight Blubaugh

    Ditto,

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

  3. david

    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. Sam

    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. Mike iLL

    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!