Locking an element (div) to the top or bottom of the browser window.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • DevInCode
    New Member
    • Apr 2008
    • 55

    Locking an element (div) to the top or bottom of the browser window.

    Gmail does this when it says "Sending.." or "working.." even when
    you scroll down the page the little box stays top and center.
    Perfectly smooth.

    www . comodo . com does this, their logo in the bottom right.

    How is this done?
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    position: fixed;

    or some Javascript if IE

    Comment

    • Frinavale
      Recognized Expert Expert
      • Oct 2006
      • 9749

      #3
      position:fixed works in IE 7 and 8 now :)

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        ah, so they finally did it? ;)

        Comment

        • DevInCode
          New Member
          • Apr 2008
          • 55

          #5
          This is my css/html. Works perfectly in FF. In IE the z-index is ignored and when I add things to the UL it pushes things down.

          Code:
          <div id="added-to-cart" style="height: auto; position:fixed; top:0px; left:0px; width: 100%; display:none; z-index: 250"><ul id="cart-added-list" style="z-index: 250"></ul></div>

          Comment

          • Frinavale
            Recognized Expert Expert
            • Oct 2006
            • 9749

            #6
            Could you please elaborate on "pushes things down"?
            Please note that the z-index will only work for elements that have an position:absolu te (or I position:relati ve too).....

            Comment

            • DevInCode
              New Member
              • Apr 2008
              • 55

              #7
              In firefox the ul expands the div that its in. it just overlays whats underneath it.
              In IE rather than lay on top of content it disobeys the z-index and moves the content down as items are added to it.

              Comment

              • DevInCode
                New Member
                • Apr 2008
                • 55

                #8
                Hmmm in FF position fixed work with z-indicies.

                Comment

                • Frinavale
                  Recognized Expert Expert
                  • Oct 2006
                  • 9749

                  #9
                  Ok I think I experienced something similar once...where elements with a style of position:relati ve were appearing on top of elements with a style of position:fixed or position:absolu te.

                  To fix this I had to move the position:fixed element under the position:relati ve element in the HTML.

                  For example, this wouldn't work:
                  Code:
                  <div style="position:fixed"></div>
                  <div style="position:relative"></div>
                  But this would:
                  Code:
                  <div style="position:relative"></div>
                  <div style="position:fixed"></div>
                  You can move the position:fixed element to the appropriate place on the page using CSS styles....

                  Comment

                  • DevInCode
                    New Member
                    • Apr 2008
                    • 55

                    #10
                    More markup than I wanted, but it works :) Thanks for your help!

                    Code:
                    <div style="position:absolute; left:0px; top:0px; z-index: 200"><div id="added-to-cart" style="height: auto; position:fixed; top:0px; left:0px; width: 100%; display:none; z-index: 250"><ul id="cart-added-list" style="z-index: 250"></ul></div></div>

                    Comment

                    • DevInCode
                      New Member
                      • Apr 2008
                      • 55

                      #11
                      I was mistaken. I should have known. This loses the fixed position part of it that I needed. so it behaves as it should, but it stays at the top of the page rather than the top of the browser window.

                      Comment

                      • Frinavale
                        Recognized Expert Expert
                        • Oct 2006
                        • 9749

                        #12
                        You shouldn't wrap the position:fixed div in a position:absolu te div...this is probably why you're having problems......

                        Comment

                        • DevInCode
                          New Member
                          • Apr 2008
                          • 55

                          #13
                          makes sense. But fixed stll doesn't do what I think ti should in IE. Instead of putting it at (0,0) its putting it on the page where it is in the HTML.

                          Comment

                          • Frinavale
                            Recognized Expert Expert
                            • Oct 2006
                            • 9749

                            #14
                            I just tested it and it's positioned at 0,0 for me in IE (8):
                            Code:
                            <div id="added-to-cart" style="height: auto; position:fixed; top:0px; left:0px; width: 100%; z-index: 250">
                              <ul id="cart-added-list">
                                <li>abc</li>
                              </ul>
                            </div>

                            Comment

                            • DevInCode
                              New Member
                              • Apr 2008
                              • 55

                              #15
                              Even when I paste your code and take mine out... it still shows up inline rather than 0,0

                              Could doc type affect this?

                              Comment

                              Working...