Jump to content

Using position : absolute vs float left and right

Recommended Posts

Never Ever! use position: absolute; UNLESS the same result cannot be achieved with floating, margins, padding, inline-block. Position absolute occupies no space, so other elements won't detect it content area to move accordingly, you would have to adjust these elements manually each time to allow for this position: absolute element content changes.


Position: absolute; is mainly used for overlapping elements for example: text over images, images over other images.

Edited by dsonesuk
  • Like 1
Link to post
Share on other sites

UGGHH! talk about overkill with class names, you have to give the container that is same width as slide show below, (not going to give class name of container as looking at all those classes gives me headache and makes me nauseous), a position:relative; this will cause title to be relative to the container edges (same as slideshow width) and not screen, adjust height, move slideshow wrapper up using top margin -30px; and title will be fix above slideshow, got to go going to throw up! uuuuuuuuuuuurrrrrrrrrrrrggggggghhhhhhhhhhhhhhhhhhhhh technicolour yawn.

Link to post
Share on other sites

????Normally you would place a position: absolute; element within a element that uses position: relative; that you wish to overlap, this forces its position to be determined by the outer edges of the outer container element. So the position absolute; element within an outer element with width 960px centred horizontally using right: 100px; would be a fixed 200px from right edge of outer element and not 200px from right edge of browser window.Your title element is outside the slideshow container element, but within centred inner element that is same width as slideshow, that is within outer element thats width is same width as browser window.So you either have to move title within slideshow OR position the title outside its current parent element so it overlaps slideshow given the same effect.

Link to post
Share on other sites
  • 2 weeks later...

absolute positioning can be used any time you need a 'Layer' (sometimes called an AP div).


Basically, a Layer is a div tag given 'absolute' position:


<div id="layer1"></div>


#layer1 {






Any time you use absolute positioning, you must set a height and width, though there are some exceptions to this.


You can also use the following CSS Properties to help position your layer:

  • top
  • right
  • bottom
  • left
  • z-index

The problem with Layers is that they are not nearly as flexible as we need them to be. This is mainly due to the fact that they are removed from the normal flow of the page. Meaning, a Layer is positioned according to the x and y axis.


Other elements completely ignore Layers. This is a major reason we avoid using them.


But any time you need to overlap an element, a Layer is perfect for the job.


Just be sure to set 'position:relative;' on the containing div. That way, your Layer will be positioned according to the edges of the containing div, thus giving you better control over positioning.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...