Question

I’m a novice, but not entirely new to CSS and coding. Over the last 6 months or so I have come a LONG WAY with my coding. A few weeks ago I came across a website with a really cool layout. In particular, the TigerHawk logo sat across (or at least appeared to) several non-AP Divs and I cannot seem to figure out how they did it. I’m pretty sure they are not AP Divs because of how the divs change position when I expand the page, etc.

Can someone enlighten me on how it was done without using AP divs? I’m pretty sure I could replicate it using AP divs and adjusting the Z-index so that the logo hovered over the top of the divs I need it to, but such a layout is too rigid for what I am looking to do.

Here is the link to the hawkeyesports.com website where the TigerHawk logo sits over the other divs. Check out hawkeyesports.com for some really cool CSS I am trying to figure out.

Any assistance would be greatly appreciated!

Answer 1

#mast-logo is absolutely positioned.

#mast-logo {
  background: url("http://grfx.cstv.com/schools/iowa/graphics/iowa-10-logo.png") no-repeat scroll 0 0 transparent;
  height: 133px;
  left: -13px;
  position: absolute;
  top: -4px;
  width: 198px;
  z-index: 200;
}

It is not really difficult to do, once you get the hang of absolute and relative positioning.