CSS Essentials

Time and time again, I witness CSS being marginalized because developers think it’s easy. And yes, it is easy! Add a background color, border color, or padding … easy. Change the width and height of an element … easy. There are a lot of code snippets out there to copy from; Just search for it. But it is also very easy to mess up your work with one change of a property. HTML, JavaScript, and CSS are the trinity for User Interface Engineers, so let’s give CSS the respect it deserves.

I like to classify CSS properties into two categories: embellishment and layout.

• Embellishment: Gives some visual effect to the element. Some examples of embellishment properties are border, background, padding, and color.
• Layout: Changes the location of an element. Some of the layout properties are display, z-index, float and position.

If you want to get the biggest bang for your buck, I would suggest for those new to CSS, and even for those who aren’t new to CSS, to truly understand the layout properties and the box model. Know what they mean and what they do like the back of your hand. After all, positioning and visually manipulating elements is the essence of making beautiful and delightful applications. Skim over the embellishment properties. They are quite easy to understand and apply. In this article I’ll be covering the position property.

The ‘Position’ Property

In order to position an element, two things need to be known or specified. 1) the positioning context and 2) the position declaration. Let’s use a real world example to clarify these two things. Say, for instance, I’m giving you directions to my house. “From Main Street make a right at Oak Street.” With this information would you be able to know where to go? If I’m headed northbound on Main Street, then making a right at Oak Street will take me eastbound. Or if I’m headed southbound on Main Street, then making a right at Oak Street will take me westbound. So, which way is the correct way to go? Without any context, you wouldn’t know which way to head on Oak Street. From this example, the positioning context would be, “Head northbound on Main Street,” and the position declaration would be, “Make a right at Oak Street.” Only with these two things do we know exactly where to go.

The position property has five values: static, fixed, relative, absolute, and inherit. In addition to the position property, the top, right, bottom, and left properties are used to specify the offset. Let’s go over each value of the position property.

Position: Static

Positioning context: Closest block ancestor. If there is none, then browser or iframe

The ‘static’ value is the default value of the element. Since the element has not been positioned, it is laid out according to the HTML source order. However, if an element has been positioned, you can use this value to reset it to its original location in the flow. The top, right, bottom, and left properties don’t apply here since the element has not been positioned. An example is on PayPal's homepage; The <h1> shows the default value of 'static' because it has not been positioned.

Position: Fixed

Positioning context: Browser or iframe

When an element is positioned using the ‘fixed’ value, it is fixed to that spot on the screen or iframe. It will not move if you scroll. The space that the element used to occupy disappears, so it will overlap or be overlapped by another element depending on the value of its z-index property. Also, the width and height of the positioned element will only be as wide or long as its content unless you specify a different width and/or height. An example is the 'Give us feedback' button on PayPal's Shopping page.

Position: Relative

Positioning context: Closest block ancestor. If there is none, then browser or iframe

An element is offset relative to where it would normally appear in the document flow. The space that it used to occupy is preserved (see below.) I added borders around the parent and child element to better illustrate the preservation of the original space. View code for the example here.

I often use position: relative; with no offsets to create a positioning context for a child element that I want to position with the 'absolute' value. An example of creating a positioning context using the 'relative' value is on PayPal's new Log In page. Notice that the declaration of the 'textInput' class has a position of 'relative' with no top, right, bottom, or left offset. I'm using the <div> with the 'textInput' class as the positioning context for the children <div>s (see below.)

Position: Absolute

Positioning context: First ancestor that has been positioned with the value ‘relative’, ‘fixed’, or ‘absolute’. If there is none, then browser or iframe

An element is offset relative to its positioning context. The space that it used to take up disappears and its width and height is determined by its content length. So, when you position an element with the ‘absolute’ value, that element is only as wide or tall as its content. See below or view code for example here.

Let’s go back to our log in page example. I used the <div> with the ‘textInput’ class as the positioning context for the children <div>s. I then declared the <div> with class of ‘errorMessage’ to have a position of 'absolute', top offset of 1px, left offset of 0, and z-index of 1. I also declared the <div> with class of 'fieldWrapper' to have a position of 'relative' and z-index of 2. What this does is cause the <div> with class of 'errorMessage' to be behind the <div> with class of 'fieldWrapper' because it has a lower z-index; effectively hiding the container with the error message behind the text input. When the input has focus, the error message container will slide out from underneath. See below for more details or you can go here to see it in action: https://www.paypal.com/signin/

Position: Inherit

Positioning context: Will vary depending on which value the child element inherits from its parent.

A child element can inherit its parent’s position property value using the 'inherit' value.

In the above screenshot, I declared the parent element to have a position property value of 'relative'. I then declared the child element to have a position property value of 'inherit'. You can see that the calculated value of the child element's position property is 'relative' just like its parent. Now that the child element's position property is calculated to be 'relative', its positioning context is the closest block ancestor. If there is no closest block ancestor, then the positioning context is the browser of iframe. See code here.

Some Useful Applications of the ‘Position’ Property

1. Tooltip using no JavaScript

This uses the position property with the 'absolute' value, the :hover and :focus pseudo classes, and the sibling selector. See code of the no Javascript tooltip here.

2. One element’s height determines another element’s height

To achieve this, I declare that the top and bottom edges of the dependent element to be flushed with the top and bottom edges of the parent container. In other words, I gave the dependent container a top and bottom offset of 0. See code example of one element’s height determining another element’s height here.

3. Two-toned vertical background that spans entire height of window regardless of content length

Here is the source for the example of a two-toned vertical background. You may ask why didn’t I use a gradient for the background. It is because when the content is extremely long, the gradient will slow down the browser.

4. Create overlapping elements for visual effect

My friend and colleague, Nat Shanker, came up with this Venn diagram. See his code here.

Conclusion

Being well versed in CSS makes you a better developer. You won’t have to resort to using JavaScript to visually manipulate elements. I have never heard anyone talk about front-end development without mentioning CSS, so please take the time to learn it. It will make your life happier, just like double rainbows and butterflies.