Z-indexing, positioning and images
I had a bit of trouble last night regarding positioning my logo above the content box. I had used the margin: auto; function to position the content box in the middle of the page, and it would move smootly as I resized the page. This used relative positioning, and everything was fine and dandy.
But then I had to position my logo on top of the content box. Ok, I thought, just use z-indexing. Ths had been my plan for a while (I changed the layout of my page, so it didn’t have any rounded corners. It saved a hell of a lot of messing around and helped me better understand css). But I didn’t realise that z-indexing wouldn’t work with relatve positioning: it needed absolute.
This worked, except when I tried resizing the window, the logo sayed in the same position whilst the box moved freely underneath.
Despite trying again and again to make it work with no success, I started searching the internet for ways to make a z-index work using relative positioning. I couldn”t find an answer anywhere. I almost gave up, and decided to approach the logo from a different perspective, until I had a brainwave: Instead of trying to use a z-index with relative positioning, could I instead use a box with absolute positioning?
All I would have to do then was to find a way to make an absolute positioned object centered on the page, regardless of the window size. Success! A simple Google search got me what I wanted. The css is pretty simple:
#content {
width: (value)px;
position: absolute;
left: 50%;
margin-left: -(value/2)px;
}
The position: absolute would allow the two elements to use a z-index. The left: 50% placed the content 50% of the way acros the screen, and the margin-left value was negative half of the width, placing the content in the middle of the screen.
I might be crude, but I thought it solved my problem quickly and efficiently. Thanks to www.zachgraeve.com for the help! If this hadn’t worked, I would most likely still be working on the logo positioning.
2 years ago