Cascading Style Sheets Positioning Phenomena Question
April 8, 2011 11:56 PM Subscribe
My friend has a question about how positioning is supposed to work in cascading style sheets.
Friend:
I wanted to create a small login form at the upper right hand corner of my Web site, laid out in a grid format, with labels being the two cells on the left, and the input elements in the two on the right. As we know from the W3C, relatively positioned elements position with respect to their original position, and leave the space they would have occupied open. I.E. if you create a container, then try to position elements with position:relative, then make your browser window the size of the container, you will get a scrollbar. For my design, I didn't want this to happen, so I played around a bit with the way I positioned the elements.
Here's what's at play. I have a "contentWrapper" div element that I use to contain all the rest of my elements on my site. I have a banner div, and within this div, I have my login form floated to the right. The previously mentioned form is within this. From my experimentation, I've noticed that when positioning elements in cascading style sheets with the position attribute, absolutely positioned elements will stay within their container unless the left or top properties are specified. What this has the effect of doing is "breaking the container." Or, in other words, the element moves outside of the container and positions with respect to the body element.
To get around this behavior, I've noticed that if you leave the left and top attributes undefined, an element will stay within it's container but still be positioned absolutely. The other elements within the container position side by side by alternating position: absolute and position: relative. This also removes the "occupied space" of the relatively positioned elements. To me, it feels like a hack, and I'd rather not use hacks in my designs.
Is this phenomenon that I've noticed understood/documented as the way it's supposed to behave? Or is this indeed a hack? My searches on the W3C specification for how positioning is supposed to work haven't returned much in the way of an answer.
Friend:
I wanted to create a small login form at the upper right hand corner of my Web site, laid out in a grid format, with labels being the two cells on the left, and the input elements in the two on the right. As we know from the W3C, relatively positioned elements position with respect to their original position, and leave the space they would have occupied open. I.E. if you create a container, then try to position elements with position:relative, then make your browser window the size of the container, you will get a scrollbar. For my design, I didn't want this to happen, so I played around a bit with the way I positioned the elements.
Here's what's at play. I have a "contentWrapper" div element that I use to contain all the rest of my elements on my site. I have a banner div, and within this div, I have my login form floated to the right. The previously mentioned form is within this. From my experimentation, I've noticed that when positioning elements in cascading style sheets with the position attribute, absolutely positioned elements will stay within their container unless the left or top properties are specified. What this has the effect of doing is "breaking the container." Or, in other words, the element moves outside of the container and positions with respect to the body element.
To get around this behavior, I've noticed that if you leave the left and top attributes undefined, an element will stay within it's container but still be positioned absolutely. The other elements within the container position side by side by alternating position: absolute and position: relative. This also removes the "occupied space" of the relatively positioned elements. To me, it feels like a hack, and I'd rather not use hacks in my designs.
Is this phenomenon that I've noticed understood/documented as the way it's supposed to behave? Or is this indeed a hack? My searches on the W3C specification for how positioning is supposed to work haven't returned much in the way of an answer.
« Older What are the appropriate emotions for an ex during... | Can you recommend some melancholy piano pieces? Newer »
This thread is closed to new comments.
This is specified in the 4th list item in this section of the CSS2 spec, but a more readable account can be found in the Opera Web Standards Curriculum.
posted by Monsieur Caution at 1:11 AM on April 9, 2011