position:absolute with no other positioning properties

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • WFTomba
    New Member
    • Dec 2008
    • 3

    position:absolute with no other positioning properties

    When you give an element position: absolute but do not apply top, left, right, or bottom to it, you seem to get a different result depending on the browser. Is there actually a prescribed behavior for this in the W3C standards? I haven't been able to find one.
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    Originally posted by WFTomba
    When you give an element position: absolute but do not apply top, left, right, or bottom to it,
    that will hardly be possible, since top, left, right & bottom are needed to position the element.
    Originally posted by WFTomba
    you seem to get a different result depending on the browser.
    welcome to the wonderful world of standard implementations and IE hacks.
    Originally posted by WFTomba
    Is there actually a prescribed behavior for this in the W3C standards? I haven't been able to find one.
    Visual formatting model

    regards

    Comment

    • WFTomba
      New Member
      • Dec 2008
      • 3

      #3
      Originally posted by Dormilich
      that will hardly be possible, since top, left, right & bottom are needed to position the element.
      Maybe it wasn't intended to be possible, but . . .

      A List Apart: Articles: Suckerfish Dropdowns

      Originally posted by Patrick Griffiths and Dan Webb
      The next step is to tackle the second-level lists that will be the dropdowns themselves:
      Code:
      li ul {
        display: none;
        position: absolute; 
        top: 1em;
        left: 0;
        }
      . . .
      you will see the need for the top and left properties in Internet Explorer, because without them, IE will align the second-level lists to the top right of their relative parent rather than the bottom left. Unfortunately, this IE fix will mess things up in browsers like Opera, so add the following CSS to reset the top and left properties on all but IE browsers:
      Code:
      li > ul {
      	top: auto;
      	left: auto;
      	}
      So these guys are saying that only IE needs top and left to position the element properly. In trying to adapt this menu design, I've found that even if I remove the position:relati ve from the parent element, the absolutely positioned elements stay near it unless I apply top, left, etc. to them--even though their containing block is now the whole page.

      It would seem logical to me for the "auto" position for an absolutely positioned element to be the upper left corner of its containing block, but that doesn't seem to be the case. I've spent quite a while looking through the W3C visual formatting model page, and I still can't find any articulated standard for this.

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        you should have added, that you have problems with the suckerfish dropdown.... (well, well, coding could be easier without IE (*sigh*)) maybe this article can help a bit: Son of Suckerfish Dropdowns | HTML Dog

        regards

        note: nevertheless, I got my suckerfish dropdown working....

        maybe you can find something here (search required): MDC

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434

          #5
          Absolutely positioned elements are automatically removed from the normal flow and will position themselves relative to the next positioned element, no matter what that is. So not using top, left, etc. is defined by that. Removing 'relative' doesn't change its positioning because it becomes the default 'static'.

          I haven't looked at Suckerfish stuff in a long time but I thought I read that it's not very relevant in a standards world nowadays. Maybe I misread it.

          Comment

          Working...