CODEWITHSUNDEEP
htmlcss
Jurudocs
Jurudocs

Reputation: 9185

Positioning divs on each other

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

Upvotes: 0

Views: 85

Answers (4)

Shawn Taylor
Shawn Taylor

Reputation: 3969

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/

Upvotes: 0

GregM
GregM

Reputation: 2654

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

Upvotes: 1

alexsuslin
alexsuslin

Reputation: 4224

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/

Upvotes: 1

YuS
YuS

Reputation: 2045

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.

Upvotes: 1

Related Questions