Positioning Exercise

There are four different position values will be used:

  • Relative
  • Absolute
  • Fixed
  • Z-index (property)

File to download
Position text


  • Folder: lastname_firstname-positioning
  • XHTML documents: 
    • example1.html
    • example2.html
    • example3.html
    • example4.html
  • Embedded style sheet

All example require a default:
Width: 750px
Font: Arial and Verdana
Font color: #665544

Background-color #efefef


Example 1 (example1.html)

Box offset
Top 10px and left 100px
width 450px



Example 2 (example2.html)

Box offset
Top 0px and left 500px
width 250px and 450px


Example 3 (example3.html)

Box offset
Top 0px and left 0px

padding 10px
margin-top 100px
width 100%
margin 0px


Example 4 (example4.html)
Box offset
Top 0px and left 0px
Top 70px and left 70px
z-index 10

width 100%
margin 0px
padding 10px

Place files in a folder and name: lastname_firstname-positioning.
Share folder link at the end of class to the Google Classroom > Positioning.

Upload at the end of the class.
DUE: Thursday, February 16, 2017