CSS 102 - Positioning

""
display: none
  1. Position

    In CSS you can use the following properties to determine where an element is placed:

    position: static|relative| fixed|absolute|inherit|initial
    left: 0px
    right: 0px
    top: 0px
    bottom: 0px

    static position

    The default position is static. Statically positioned elements are placed in the order they are defined in HTML. If position is static the left|right|top|bottom properties do not affect the element.

    #outer
      #inner
    #outer
      width: 200px
      height: 200px
    #inner
      width: 100px
      height: 100px
      position: static

    relative position

    Setting the position to relative allows the element to be moved relative to its static position. The left|right|top|bottom properties can be used here to move the element. Note that if both left and right or top and bottom are set the first defined property is used.

    #outer
      #inner
    #outer
      width: 200px
      height: 200px
    #inner
      width: 100px
      height: 100px
      position: relative
      top: 20px
      left: 10px

    fixed position

    A fixed positioned element is "stuck" to the viewport. The viewport is the currently visible part of the page. This means that scrolling does not effect the elements position. If you are looking for the square try and find it based off its bottom and right values...

    #outer
      #inner
    #outer
      width: 200px
      height: 200px
    #inner
      width: 20px
      height: 20px
      position: fixed
      bottom: 0px
      right: 0px

    absolute position

    A element with absolute positioning is positioned relative to its closest positioned parent element. If none of its parents are positioned then it will use the document body. This means it is affected by scrolling.

    #outer
      #inner
    #outer
      width: 200px
      height: 200px
      position: relative
    #inner
      width: 70px
      height: 70px
      position: absolute
      bottom: 0px
      right: 0px

    parent and child positions

    Note that this second example does not have a positioned parent. Therefore it will be using the document body to position itself.

    #outer
      #inner
    #outer
      width: 200px
      height: 200px
    #inner
      width: 20px
      height: 20px
      position: absolute
      top: 0px
      right: 0px

    example

    Now try it out yourself with this interactive toolbox:

    Set the position of the inner element to:
    static
    relative
    fixed
    absolute

    Set the placement of the inner element to:
    Current top:
    initial
    Current bottom:
    initial
    Current left:
    initial
    Current right:
    initial

    Set parent position to relative:
  2. Display

    Apart from the position property an element's "display" property can also be set. This effects the box model used for the element. There is a long list of options here but the three most important ones are block, inline and inline-block.

    block display

    Block displays an element as a 'block type' element. This means it automatically assigns margins to ensure it starts on a new line to its previous element. If no width is set it will also attempt to fill up its parent element. Block is the default display type.

    .column
      #first
        p
      #second
        image
      #third
    #first
      height: 100px
      display: block
    #second
      height: 128px
      width: 128px
      display: block
    #third
      height: 100px
      width: 100px
      display: block
    Ferdinand Magellan was a Portuguese explorer who led the first expedition that sailed around the Earth.

    Inline display

    Inline displays an element as an 'inline type' element. This is similar to text in that it does not drop to a new line. It also ignores any height and width values that are set.

    .column
      #first
        text
      #second
        image
      #third
    #first
      height: 100px
      width: 100px
      display: inline
    #second
      height: 128px
      width: 128px
      display: inline
    #third
      height: 100px
      width: 100px
      display: inline
    Ferdinand Magellan was a Portuguese explorer who led the first expedition that sailed around the Earth.
    Pop Quiz! Why is the third element not being displayed?

    Inline block display

    Inline-block displays an element as an 'inline type' element but allows the width and height to be set. The inside of the element is treated as a block while the outside behaves as an inline object.

    .column
      #first
        text
      #second
        image
      #third
    #first
      height: 100px
      display: inline-block
    #second
      height: 128px
      width: 128px
      display: inline-block
    #third
      height: 100px
      width: 100px
      display: inline-block
    Ferdinand Magellan was a Portuguese explorer who led the first expedition that sailed around the Earth.

  3. z-index

    The third aspect of positioning is the z-index. This is used to set the order that elements are displayed in. An element with a higher z-index is displayed on top of an element with a lower z-index.

    .column
      #first
        text
      #second
        image
      #third
    #first
      height: 150px
      width: 150px
      display: inline
    #second
      height: 128px
      width: 128px
      display: block
      position: absolute
      top: 10px
      z-index: 1
    #third
      height: 100px
      width: 100px
      display: block
      position: absolute
      top: 60px
    Ferdinand Magellan was a Portuguese explorer who led the first expedition that sailed around the Earth.
  4. Exercises

    1. Download position.zip and unzip it in your Documents/Prototypes. By editing the stylus file help Fido catch his ball. If it looks something like the below then you've got it. As an extra challenge try and complete this exercise three times using different 'position' settings each time.

      #ball
        img
          width: 30px
          position: absolute
          top: 120px
          left: 380px
    2. Download display.zip and unzip it in your Documents/Prototypes. Edit the display types on the elements on the page to complete Harry Pupper's blog. He has requested that it looks like this.

      body
        font-family: Arial
      
      .navbar
        margin: -8px
        height: 40px
        background-color: rgb(63, 174, 224)
        .navbuttons
          padding-top: 10px
          margin-left: 8px
          .button
            color: black
            border: 1px solid grey
            background-color: lightgrey
            border-radius: 4px
            padding: 4px
            cursor: pointer
            display: inline
      
      .title
        margin-top: 22px
        font-size: 30px
      .image
        margin-top: 10px
      
      .info
        margin-top: 10px
        .infoBit
          margin-right: 30px
          display: inline-block
      
    3. Someone broke the rainbow :( Download index.zip and unzip it in your Documents/Prototypes. Edit the z-indexes of the objects to create a rainbow.

      div
        position: fixed
        top: 0px
      
      #indigo
        height: 100px
        width: 200px
        left: 500px
        background-color: indigo
        z-index: 6
      #red
        height: 100px
        width: 700px
        left: 0px
        background-color: red
        z-index: 1
      #blue
        height: 100px
        width: 300px
        left: 400px
        background-color: blue
        z-index: 5
      #orange
        height: 100px
        width: 600px
        left: 100px
        background-color: orange
        z-index: 2
      #green
        height: 100px
        width: 400px
        left: 300px
        background-color: greenyellow
        z-index: 4
      #violet
        height: 100px
        width: 100px
        left: 600px
        background-color: violet
        z-index: 7
      #yellow
        height: 100px
        width: 500px
        left: 200px
        background-color: yellow
        z-index: 3
    4. Now for a more challenging exercise... Head here.

    5. Finally, take a look at the following pages. Try and describe what's happening in each of them. What styles make up the headers? What about the other elements on the page?