Absolute Positioning

Archive for 'Absolute positioning? Absolutely not!' Category

Absolute positioning? Absolutely not!

“Absolute Positioning? Absolutely not!” This reaction to the process of absolutely positioning elements on a web page is understandable but not justified. Why ever not? Absolute positioning provides the designer with certain advantages and quite a few disadvantages too. However, before we actually set out the long list of advantages and disadvantages, let us look [...]

Defining concepts

Absolute positioning defines the x and y coordinates of an element with reference to the top-left corner of the browser page or the containing block, and the position attribute is set to absolute. The code will read somewhat like this: <style type= “text/css”> <!-– p {position: absolute; left 50pt; top: 30pt} –> </style> Note that [...]

Comparing concepts

Most users are confused between absolute and relative positioning concepts in CSS. This is on account of the coordinate system within which the block is placed. The block then depends on the positioning context, and there is no universal set of coordinates to guide the designer. Whenever a new block is placed on the page, [...]

Combining concepts

Absolute positioning is relative! In reality, an absolutely positioned element is relative to its containing block. The containing block is the nearest-positioned ancestor or the document’s initial containing block. It is a structurally superior element whose property is absolute or fixed or relative. The following example shows how an absolutely positioned element can be relative [...]

z index property and positioning—absolute/relative

CSS allows an overlay of elements to create a 3D effect. The elements can be absolutely positioned in such a way so that they are positioned in overlapping layers. A stacking occurs, and the z-index order value is used to position the layer in the stack and, consequently, the image or text. The code below [...]