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.

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.

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
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Create a Simple Slideshow Using MooTools, Part II:  Controls and Events

    Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by: Adding "Next" and "Previous" controls. Adding...

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

Discussion

  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!