Positioning

  • Read pages 301 - 305 Visual Quickstart

  • There are four types of Position elements - Static, Fixed, Absolute and Relative
    • Relative
      • positions the element relative to the outer element. For example - if an object has a relative position 100 px left inside a container that is center aligned on a web page it will float with the centered object.
    • Absolute
      • positions the element in an x/y coordinate on the page...will not move with browser resize - does not work well with a fluid layout (center aligned)
        • fix it with an absolute position with the outer container set to relative position. Go figure?!!
      • Can control elements to appear in exact locations...not the best for mobile
        • Creates a rectangle object that can now be physically moved around the page in design view
          #rectangle {
          width: 150px;
          height: 100px;
          position: absolute;
          top: 54px;
          left: 152px
          }

        • Creates an absolute positioned object which means that it will not move regardless of how the browser is expanded
      • How can you use it so that it will always remain in the same relationship with your layout?
        • Create a container div that has a relative position style
        • Put the AP div code inside that that div. It will now position in a relative position to the outer div...even outside the container
    • Try this:
    • <style type="text/css">
      .red {width: 500px; height: 100px;position: relative; margin: auto; background: url(images/ribboncenter.jpg) repeat-x}
      .ribonleft {width: 110px; height: 94px; position: absolute; left: -110px; background: url(images/ribbonLeft.jpg)}
      .ribonright {width: 106px; height: 93px; position: absolute; right: -106px; background: url(images/ribbonRight.jpg); top: 0px;}
      </style>

      <div class="red">
      <div class="ribonleft"></div>
      <div class="ribonright"></div>
      </div>