Posts: 8,824
Name: Steven Bradley
Location: Boulder, Colorado
|
To have your text display on top of your image you need to give the text a higher z-index than the image. If you don't specify a z-index it defaults to 0. You can also give the image a -value for the z-index, but it's more common to have +values for what will be on top. You can pick any number you want. I typically use 5 or 10 just so I can sneak something in between the two layers later without having to change what I've already done.
An element needs to have a position before it can have a z-index so in this case you'd probably want something like:
#text {position:absolute; top:# of px; left:# of px; z-index:any # greater than 0}
where #text is the id of the block of text to display on top of the image.
You can actually have the text on top of the image without using z-index at all. If you put the text in a div you could give the div a background-image
div#text-on-top {background-image: url(path to your image); no-repeat}
The background-image will sit under whatever else is inside the div. the no-repeat is to prevent the image from you guessed it repeating. There are many cases where you want the image to repeat.
This second way may need a little more styling depending on where the text should sit relative to the image since you'll have a harder time having the text overlap only part of the image this way. It can be done. it just needs a little more css.
Positioning both the image and the text with the z-index might be easier.
Using layers is not going out of fashion. In fact they're replacing the use of tables for layout for a variety or reasons. I think what you were reading about was something specifically for older netscape browsers (I think it was for NN4, but I may be off a version) The concept was simliar as far as having objects on your page sit in layers on top of each other, but the technology behind both are different.
Using divs and css positioning is not going out of fashion and while different browsers (well basically Internet Explorer) have issues sometimes these are pretty easy to overcome in most cases and with IE 7 coming out sometime in out lifetime (or maybe it will be our childrens' lifetime) I imagine many of these issues will start to become less and less.
|