Topic: Absolute Positioning Help

Hello,

I'm reading up on absolute positioning, and it looks like the position of such elements apply strictly to the container object (in my case, the web page document).
Is there another positioning method, similar to absolute, that the elements position relative to a parent element, like a div tag?

Karl


karl@laketahoegymnasticscamp.com

Karl: Yes - it might sound awfully obvious but::

myStyle {

  position: relative;

  top: 5px;

  left:10px;

}

___________________
Emps

FAQs: Emperor

Well...

What Emporer just mentioned there will position the element relative to its *own* original position in the document.

To position an element relative to its parent, you're supposed to be able to use position:absolute. That's exactly how position:absolute is supposed to work. However, browsers implement it incorrectly. I'm not sure which ones.

A question relative to absolute positionning... Is this really posible to make frames with absolute positionning ?

Ultimately all things are known because you want to believe you know.
-Zensunni koan

I think you'll need to clarify a bit moonshadow - do you mean "can you have a page with frames and use absolute positioning?" or do you mean, "can you simulate frames using absolute positioning?"

If the first, then yes...it makes no difference.

If the second, then...no. Not really. You can use some javascript tricks and some workarounds that will give you something...similar. But not quite.

If you mean something else altogether, you'll need to calriify a whole bunch!

=)




[This message has been edited by DL-44 (edited 01-22-2003).]

I intended this in the second way : simulating frames with absolute positionning.

Humm if it's no it's a bit disapointing... I mean, in XHTML 1.1, the <frameset> and <frame> tags are modified, there are many properties that are not longer used. "Frameborder" goes into the <frame> tag, and even if it's set to 0 there is still a line appearing on the page... So I seeked a way to simulate a frame and stay compatible with W3C XHTML 1.1 but it erase a possibility. Thanks anyway.

Ultimately all things are known because you want to believe you know.
-Zensunni koan

Moon Shadow: If it is the second way then have a look at the position:fixed style - its not got great browser support yet but it will give you the ability to have a static area on your screen. If you want something more complex like scrollers or iframe effects then we have solutions in the FAQ.

___________________
Emps

FAQs: Emperor

Moonshadow - it also makes a difference to what extent you're looking to simulate frames.

If you're speaking soley from a layout perspective, then sure - you're possibilities are endless.

If you're more worried about having content load in one frame without having to reload the other frames, then you're pretty much out of luck (although there are other options,with varying levels of complexity/effectiveness).

So, again, it depends on specifically what you want

But, of course, frames are a pain in the ass anyway =)

If you want to absolutely position an element relative to its parent, rather than relative to the document, what you have to do is set 'position: relative' on the parent and then 'position: absolute' on the child you want to position.
Note: this isn't supported by NS4 (which will always position relative to the document), and IE5 has a few quirks if you try to absolutely position to a parent using 'right:' or 'bottom:' properties rather than 'top:' or 'left:'.

This seems counterintuitive, but it's because the CSS spec states that 'position: absolute' is relative to the nearest positioned parent element. All elements are unpositioned by default, so this usually means the nearest positioned element is the document: hence you have to override this with 'position: relative' on the parent element.

Thanks for the clarification vigil =)

I've just had the absolute/"parent made relative" problem, and your explanation gave me some relief.
But fact is that I can't find in the specs where it is clearly specificied:
"is relative to the nearest positioned parent ".

I would be pleased if you can point me out on the good part of the spec!

According to the CSS2 specs ( http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position ), position:absolute specifies offsets "with respect to the box's containing block." The definition of containing block is at http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block , and says nothing about having to be positioned. Therefore, I believe IE's positioning relative to the nearest positioned ancestor is buggy. Then again, maybe that's how the CSS1 spec said to do it that way. I dunno though.

Well... In fact after some diggin' I finally found the explanation.
Clearly written here, with an exemple...
http://www.w3.org/TR/REC-CSS2/visuren.html#q29

Problem is that it's only specificated on this paragraph, didn't seen it mentioned anywhere else.
Not a so clear specification...

Ah. There it is. You're right, it's a little ambiguous, since in two other places it says it's with respect to its containing block.

[edit: oooh, that's not ambiguous, since it also says "containing block for a positioned box is established by the nearest positioned ancestor." So it's just the definition of "containing block" that messed me up.]

[This message has been edited by Slime (edited 02-07-2003).]