相互定位div

Question

I have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors. Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.

My trouble: Why is the text container not showing up on the first div? Please see my fiddle on http://jsfiddle.net/pvvFR/

Thank you in advance for reading and if so...for answering

Answer 1

If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute ), so the content could overlay it. Your problem is not in text, but in image.

Answer 2

try to have each container a unique class and replace with for example and put the image to div background like

background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');

http://jsfiddle.net/pvvFR/10/

Answer 3

Is this something like that a solution

http://jsfiddle.net/pvvFR/7/ I've put a position absolute on you slider

and i've put your container div out of the slider

EDIT :

Look at this: http://jsfiddle.net/pvvFR/13/ everything is relative And i've given a height to your slider, and position your container to a negative top

Answer 4

Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.

Check this. http://jsfiddle.net/pvvFR/14/