Category Archives: css

css positioning: relative and absolute

We were working on our menu bar and the css was killing me.  So after finally reading some stuff on the web and some experimentation I figured it out. Basically, it came down to these two rules:

Rule #1:  Absolutely positioned elements use relatively positioned elements as anchors.  If no parent relatively positioned object exists, then the <html> tag is used.  (this means it will appear in the top left if you set left: 0px and top: 0px)

Rule #2:  Relative positioned objects show up where they would if they were the default “fixed” object.  However, in order to actually display them there, you need to set display: block.  (I think mine were inline or something)

Here’s a snippet of my css code that works:

ul.navbar
 display: block
 width: 100%
 height: 36px
 clear: both
 list-style-image: none
 list-style-position: outside
 list-style-type: none
 
 // nodelist dropdown is the only li in this menu that has a dropdown list.  Therefore, its the only one that is relative
 // the other li's are the default fixed.
 li#nodelistdropdown
   position: relative
   display: block
 li  
   text-align: center
   a   
 
     cursor: pointer
     float: left
     height: 36px
     width: 162.83px
     background: #ccc
     text-decoration: none
     
     span
       line-height: 36px
   a:hover
     background: #aaa
 li a.active 
   background: #aaa
 
 // this is the second dropdown within the menu list.
 // notice that since the width of the containing elements are 162.83px this
 // item is shifted left 162.83px so that it aligns with the 2nd tab.
 ul.menulist3 
   top: 36px
   left: 162.83px
   position: absolute
   z-index: 99

 ul.menulist3 li
 margin: 0
 padding: 0
 clear: both
 text-align: left

 ul.menulist3 li a 
 float: left
 text-decoration: none
 padding-left: 10px
 background: #fff
 border: none