Home > ASP .NET, Programming > Web Development basics for ASP.NET Developers – Positioning

Web Development basics for ASP.NET Developers – Positioning

As I mentioned in the post about Normal Flow the rendering can be modified by using CSS positioning and floats. We will look into positioning in this post.

position: static implies Normal Flow, the flow is not modified.

All other positioning is relative to something else

position:relative is relative to the element box itself. For example Specifying position: relative and left: 5px, top: 5px renders the element moving it 5px down and 5px to the right of the actual element box. It is useful to shift rendering location of the element relative to its original element box by a few pixels to the left, right, top or bottom.

position:absolute is relative to the containing block. The containing block is the ancestral element which is positioned relative, absolute or fixed. If there is no such element then a hypothetical initial containing block (the viewport usually) is used. Viewport is the visible area of the browser window that can show html content (excludes addressbar, menubar, statusbar, toolbar etc.). When an element is positioned absolute it is removed from the document flow and positioned relative to the containing block as specified by the top, left, right, bottom attributes.

position:fixed is similar to position:absolute but the containing block is always the initial containing block. This is useful when you want to create a menu that is always at the top of the page and doesn’t scroll as the user scrolls content vertically in the viewport.

The stacking order is controlled by the z-index css attribute. Element boxes with higher z-index appear above element boxes with lower z-index.

I recommend you to read the following excellent articles on positioning:

Web Design 101: Positioning

CSS Positioning 101

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: