0

Hi After having a problem or two with CSS based web pages I have made I find that the problems are too be resolved when the absolute positioning is removed. Well that is what has been suggested. Since in some cases I have used code from other web sites. Web sites that are often established by well respected web design authors I am puzzled as to whether the absolute positioning is really required. Can the use of absolute positioning be avoided? When is absolute positioning absolutely (pun no apologies given) required? A useful learning tool can be found at : [Click Here](http://www.barelyfitz.com/screencast/html-training/css/positioning/)

Geoff

4
Contributors
5
Replies
34
Views
4 Years
Discussion Span
Last Post by ggeoff
1

well respected web design authors

I am by no means even close to being considered a web design author, but in my case, I generally avoid absolute positioning except when I need to fix a header, footer, or images in certain parts of the page. I wouldnt suggest using absolute positioning to position content within the page itself as demontrated in the link tutorial you posted. As you read in the tutorial, the absolute positioing will remove the element from its normal flow and other elements around the absolute positioned element will behave accordindly.

In the case where you have a page with static content, I suppose that if you work it hard enough you can get it to look exactly the way you want with positioning, but you have to take into account that you may not get the exact result accross all browsers, so I dont suggest using this approach. I definately do not find it feesible with the type of content that is being rendered in modern sites.

1

I agree with JorgeM. I generally avoid using absolute positioning. The nature of the property does not allow flexibility of course, so this makes this less useful for sites serving up dynamic content, in which element sizes can change from page to page. One instance where you might use absolute positioning is if you need to overlay an item on top of another, in a very specific place. For example, if you're creating a translucent div to "grey-out" a page behind a modal box, you might apply an absolute positioning to it to force it to start at the top-left corner of the page. Another example for absolute positioning is if you want to place something dead-center of a page, without regards for other content on the page (I use this for the form on my Client Login page).

1

Absolute positioning is used when you need to position an element relative to another element. For example, in a dropdown menu you will want to position the dropdown relative to its parent.

Absolute positioning is essential for dropdowns, hover effects, scrolling effects, etc. It is also used when you want to position an element in a place different from where the HTML code for that item is. For example, you may wish to place all of the scripts that load advertising way down at the bottom of the page, so that they're the last thing to load, but have the ads appear near the top within the content.

EvolutionFallen, I think that you might be confusing absolute positioning with fixed positioning. Fixed positioning is used when you want to place an element at a certain location relative to the browser window. Absolute positioning is used when you want to place an element at a certain location relative to its parent or ancestor element.

0

I realized my examples fit fixed positioning just as well after I posted.

Fixed positioning is used when you want to place an element at a certain location relative to the browser window. Absolute positioning is used when you want to place an element at a certain location relative to its parent or ancestor element.

That's certainly a better way to put it. I normally just choose one based on what I need to accomplish. If I need specific positioning that doesn't affect other elements' positions, but scrolls with the site, I use absolute. If I need it to stay in the same place relative to the viewport as I scroll, fixed. So the understanding is there, I just never put it into words before =P Hope that makes sense.

0

Thanks for the discussion folks. Having tried and failed to find, pinpoint, an error in my web code. but having isolated the issue to the "sticky" footer type code I have resolved my problem, for the present, by chopping the web page into two sections. A CSS controlled div layout for the page masthead/banner picture and site navigation and a layout table for the page content and the footer.

Edited by ggeoff: clarify meaning

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.