ansaurus

Question

HTML/CSS : absolute positioning of elemts wthin <fieldset>

Answer 1

+5 A:

"absolute" means absolute, relative to he nearest "relative parent". A relative parent is either an element with position:relative or, if there isn't one, the document.

Additionally, making an element absolute has certain implications, like removing it from document flow. The DOM will be laid out as if the absolute elements do not exist. This means containers will not wrap around absolute elements and no elements will be pushed out of the way by them.

CSS positioning can seem like black magic until it is revealed that it follows these very simple rules - no exceptions! (which is a good thing)

Edit: The specifics of what you do here depend on what you are trying to accomplish. Why are you using absolute positioning in the first place? Absolute positioning has the simplest rules, but is also very powerful, and powerful tools are also a lot harder and require a lot more manual work, and they have more potential for bad things to happen. That's the trade-off. For example, if one element grows larger without moving the other ones to take that into account, they could overlap. Absolute positioning depends on you keeping values in proportion on each element to make sure they are all lined up correctly. And if you want a wrapping element, it requires that you always update the height and width properties to keep it large enough to have the appearance of wrapping.

To take advantage of what document flow provides - wrapping, automatic alignment, etc - you can use floating, margins and padding. Based on my limited understanding of what you are trying to do here, I would set the padding of the container fieldset to reflect where the child fields should be positioned and give each field a margin. For fields that should sit to the right of the previous instead of the next line, use float:left and clear:left.

Rex M 2010-06-04 00:51:23

Also, good to mention that if you do want absolute positioning (as in absolute to the window) then use `position: fixed;`

Duracell 2010-06-04 00:59:17

+1: Good insight. Thanks!

DavidR 2010-06-04 01:03:31

relative, absolute and fixed, it's all good, but what's your goal? I see that your code set absolute for all elements... Can you provide an image of your goal? Because I do believe that you can get what you want with far less css :)

Zuul 2010-06-04 01:37:26

I wish I could allocate the answer to a comment, because `position: fixed;` works for me. I could leave it here, but I want to ask Rex (who gets the answer) ... 1) how should I do this 'properly'? I have no element marked `position:relative`, so shouldn't my code, where everything is absolute just display as if it were fixed? It does not. 2) If I mark everything as fixed, will I still get wrap problems? How to do it best? Perhaps mark the fieldsets as relative and the rest as absolute? but - what about nested fieldsets?

Mawg 2010-06-04 07:20:31

Sorry, I'm not subscribed to any image sharing service, but if you take the HTML and replace absolute with "fixed" throughout, it will look very close to what I want. There are still a few anomalies, though

Mawg 2010-06-04 10:13:11

@mawg I am pretty sure `fixed` is not what you want, because being absolute relative to the window, not the document, means that if the document is long enough to be scrolled, the document will scroll but the fixed elements will not move.

Rex M 2010-06-04 14:01:55

@mawg see my updated answer.

Rex M 2010-06-04 14:02:19

ansaurus

tags:

views:

answers:

HTML/CSS : absolute positioning of elemts wthin <fieldset>

related questions