Absolutely Positioned Textareas

A handy technique for absolutely positioning textareas using left, right, top and bottom values to lock inner elements relative to an outer container. This avoids any issues with padding in various browsers…

How to Center an Absolutely Positioned Element Using CSS

Centering an absolutely positioned element is a CSS challenge that occurs now and then. The solutions seem obvious once I’ve done it, but I still find myself googling the problem every few months…

Z-Index And The CSS Stack: Which Element Displays First?

Let’s start with a quick review. If you read the previous css positioning post you can probably skip to the next section.A web page is a two dimensional plane with width and height. z-index is the missing third dimension, depth, with an axis that moves in and out of your monitor. z-index allows us to […]

How Well Do You Understand CSS Positioning?

When people are new to CSS layouts there’s a tendency to gravitate toward positioning. Positioning seems like an easy concept to grasp. On the surface you specify exactly where you want a block to be located and there it sits. Positioning is a little more complicated than it first appears though. There are a few […]

Absolute, Relative, Fixed Positioning: How Do They Differ?

An important concept to understand first is that every single element on a web page is a block. Literally a rectangle of pixels. This is easy to understand when when you set the element to display: block; or if that element is by default display: block; This means you can set a width and a […]

Fixed Positioning in Internet Explorer 6

Fixed positioning has always been a nuisance for web designers because of the lack of support for it in Internet Explorer 6, but I've come up with a solution that allows for cross-browser fixed positioning that doesn't come at the large costs that other techniques result in. If you've been on the hunt for a […]

CSS Absolute Positioning: Create a Fancy Link Block

Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element an image, a table, or whatever absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block […]

Maximum value of z-index

Z-index is used to determine the stacking order of absolutely positioned elements on a page. The CSS 2.1 spec says the value of z-index should be an integer. But it doesn’t define the any maximum values for it. So the actual max is often determined by what variable type the browser uses to store the […]

Absolute Positioning Inside Relative Positioning

A page element with relative positioning gives you the control to absolutely position children elements inside of it. To some, this is obvious. To others, this may be one of those CSS “Ah-ha!” moments…

All About: CSS Positioning

At some point or another, if you want to lay out a complex CSS design, you’re probably going to have to turn to the veritable Swiss Army knife of advanced CSS layout: the position property. There are four possible values for this property: static, relative, absolute, and fixed. Let’s briefly go through each…

Next Page »