BENINCOSAArmchair Notes

An old man’s take on tech, systems, and trying to make sense of the world.

Technology

css positioning: relative and absolute

By Vallard BenincosaMarch 7, 20111 min read
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