13 replies [Last post]
cyberstudios
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

I've noticed that for absolute positioning of elements 'left' and 'top' are often used by some. Until now I've stuck to 'margin-top' 'margin-left' etc as I tend to build my sites 'in the flow' using relative positioning. Can 'margin' postions be used out of the flow for absolute positioning or should we use 'left' 'top etc when using absolute?

I'm thinking here of objects such as popup information boxes which remain hidden until a mouseover is performed. I'm trying not to get involved with Dreamweaver's notion of 'layers' but rather code CSS properly. I'm just confused as to whether 'left' & 'top' absolute postioning is purely a Dreamweaver attribute.
Thanks for your help (and patience!)
Paul

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

correct position

For position:absolute you should use some of left, top, right and bottom. Be aware that IE/Win doesn't like you to use two opposites on the same element.

Margins don't really have a meaning for positioned absolute elements. They push an element away from its neighbours and a positioned absolute element doesn't have any neighbours. It is possible to use margins to push an position:absolute element away from its default position, but its much more sensible to use left, top, right and/or bottom.

Letting elements find their own position in the browser's normal flow is not position:relative, but position:static.

Position:relative is a little more complex. It has two functions:

  • establish a new display context. This allows descendent elements with position:absolute to be located relative to this element's content boundaries.
  • to move an element relative to its normal position in the flow whilst leaving a hole in the flow where the element would normally be placed. This movement is accomplished using some of top, left, right and bottom.

[/]
cyberstudios
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

correct position

Many thanks for the info. With reference to relative positioning within the flow, as an example I may use margins to relative position blocks of text within a container, which itself might be in the document flow. I would refer to this as relative rather than static as the text is being moved away from its default postion, perhaps indented & dropped down a few pixels. Would I be correct in saying this is 'relative', not 'static'?

In respect of the left, top etc attributes, are we saying then that these are always best used for absolute positioning and margin should never be used? It has to be said that in reality, specifying 'margin-left' or just 'left' both seems to have exactly the same effect, so what technically is the difference? I dont want to seem pedantic but the essence of CSS seems to me to be about conforming to the proper standards and I'm just trying to learn good habits at the start Smile

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

correct position

cyberstudios wrote:
Many thanks for the info. With reference to relative positioning within the flow, as an example I may use margins to relative position blocks of text within a container, which itself might be in the document flow. I would refer to this as relative rather than static as the text is being moved away from its default postion, perhaps indented & dropped down a few pixels. Would I be correct in saying this is 'relative', not 'static'?

No, that is not correct. That is static position, margins are accounted for in static positioning. If it were relative, you would move the element away from it's RESERVED space by using top, left, etc. but the elements initial space in the document flow is still there.

Quote:
In respect of the left, top etc attributes, are we saying then that these are always best used for absolute positioning and margin should never be used? It has to be said that in reality, specifying 'margin-left' or just 'left' both seems to have exactly the same effect, so what technically is the difference? I dont want to seem pedantic but the essence of CSS seems to me to be about conforming to the proper standards and I'm just trying to learn good habits at the start Smile

Correct, margins should not be used for absolutely positioned elements - they do work, but as Chris pointed out, that's not how they're meant to be used. Use top, left, etc. for AP and relative positioning.

cyberstudios
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

correct position

Right, I think I'm getting this now. Just one area of confusion: say you have a <div> container and you want to postion the header text 5px below the top - leaving the <h> tag in its default state of 'static' you could specify margin-top: 5px and that's OK? You could however change it's position to 'relative' and specify top: 5px which would still work.

So what I'm still unsure about is when to use margins for positioning and when to use relative left, top etc. I'm beginning to think that relative left, top is best for box positioning and just use margin for elements such as text, would this be a good rule?
Thanks again!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

correct position

Just to throw my 2¢ in: Before using top, left, etc., with relative positioning, you should have compelling reason. An RP element is in the flow, but its shifted position is not. Have a care.

Margins are for creating separation between elements. Shifted elements create special effects.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

correct position

cyberstudios wrote:
Right, I think I'm getting this now. Just one area of confusion: say you have a <div> container and you want to postion the header text 5px below the top - leaving the <h> tag in its default state of 'static' you could specify margin-top: 5px and that's OK? You could however change it's position to 'relative' and specify top: 5px which would still work.

So what I'm still unsure about is when to use margins for positioning and when to use relative left, top etc. I'm beginning to think that relative left, top is best for box positioning and just use margin for elements such as text, would this be a good rule?
Thanks again!

No, see gary's post above. Assuming margins were zero on the header to begin with, the first method of adding margin-top: 5px; to the <hx> is correct. The relative positioning method would reserve the headers space up tight to the top of the div and move it's content down 5px, which would then overlap any elements following the header.

cyberstudios
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

correct position

Thanks, it makes much more sense now. And I can see the point of being careful with relative positioning in the flow, seems the crucial point to keep in mind is that the space it would have occupied is reserved, I can see the pitfalls here.

I'm now trying to figure with all this new knowledge how I could tie together a centered layout in the flow, whilst having popup information tags, which appear as if they must be absolute. I've attached a sample file to illustrate. My design doesn't work as the popups aren't relative to the product thumbnails, which they need to be to retain layout integrity at different browser sizes. But if I try to add the popups to the document in the flow with relative positioning I get all sorts of problems. Is there a way I can achieve the effect I'm after?

BTW, I've no idea why the layout looks ok in Netscape 7 but the right hand product drops below the others in IE 6 - I've checked everything I can think of...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

correct position

Ah, I now see your confusion. An AP element is positioned from it's closest positioned containing block. To make a containing block positioned it needs to have any value but the default static. It is possible to set a static element (with or without margins) to position: relative - but then not move said element with positioning attributes like top, left, etc. That element, even though not moved is said to be positioned. It is therefore very common for a static element in the normal flow to receive a position: relative; only to make it a containing block for a child AP element. I hope I'm not confusing the issue. There are plenty of good articles on the subject. http://www.stopdesign.com/articles/absolute/

Now in your example code, the .product classes are floats (which are a type of positioning - not static) so your AP elements are in reference to the top left corner of those classed divs. Note that IE may foul this up - I'm not at a PC to test AP/float reference. I'm not sure where you want the popup to be located, but I'm guessing within the .product div, in which case the left: 400px should probably be 0.

As to why your last float is dropping below the others. I'm guessing that IE is showing it's double margin bug on the first float, pushing the others right and there's no room in the container for the last float, so it drops down a line. Just add display: inline to the .product - see here for reasoning: http://www.positioniseverything.net/explorer/doubled-margin.html

A couple notes with your CSS
1)You should probably add html to your body {margin: 0;} rule - like this:
html, body { margin: 0;} as some browsers have defaults on it as well. I'd set padding to zero on those as well.
2) Your layoutlogic div is not needed, nor is the width: 100%; as that's the default for block level elements.

cyberstudios
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

correct position

Well that's fixed the float problem, just adding 'inline' did the job - many thanks!

Your explanation of absolute positioning within relative containers also helped enormously and really sorted out my misconceptions. I've now re-worked the document and I'm almost there with the principle, but it's produced another issue. In IE6 the popups appeared beneath the adjacent containers, and in Netascape they appeared relative to the document, not the product container. So I figured maybe I should set the main layout container to relative and the nested <divs> to inherit. This works better - the popups are now on top - but they appear in the same place, ie relative to the main container. I'm sure it doesn't need much now to fix it, but I'm struggling to see it!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

correct position

Have you tried adding position: relative to the floats? and then reference from there as you were before.

cyberstudios
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

correct position

If I specify position relative for the floats I get the phonomon where the popup is hidded by the adjacent float in IE6 and in Netscape 7 they both pop in the same location

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

correct position

Where is the popup in relation to the float? Have you tried to z-index the popup?

cyberstudios
Offline
Regular
Last seen: 17 years 13 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

correct position

ok I've come up with a solution which seems to work well: I set the main container to position relative, the floats to inherit and the popups are nested inside the main container with seperate co-ordinates and positioned absolute. This works in both IE6 & Netscape 7 with identical results, I've attached the new file in case you want to take a look.

I want to thank everyone for their help, I've learned important principles here which can be applied to other projects and I have a much better understanding of CSS. I dont know how long you have to work with CSS before you acquire the level of understanding you guys have though Smile
Regards
Paul