Ok, here it is, I'm trying to solve a problem which has been bothering me for 2 days, and I can't figure it out how to solve it I have to DIV elements one below another, and a IMG element positioned inside the first div at its bottom, in such way that it should display half of the image over the DIV's border. But, for some reason, it doesn't. And I don't know how to make it show the rest of the IMG that is over the parent DIV border Here's how it looks, and how it should look: Someone please help me I gonna go crazy with this CSS styling
check this http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp Code (markup):
Thanks for the help! This does help me a bit by understanding what z-index is, but from what I can see, those elements are all placed as parents on the screen. The DIV's in the example above have no parent-child structure. What I have is a child IMG inside a parent DIV, and what I want to, is to show the child IMG outside the borders of the parent DIV. Sorry if it sounds complicated, but It really is :s
Nah, it's on localhost... This sh1at is killing me...I've set the two DIVs and the IMG "position:relative", and set DIV 1 and DIV 2 to "z-index:1" and IMG to "z-index:2" but it's still the same :\
No, the IMG is set "position:relative" since the first DIV is not of fixed height, so I cant position the IMG with "absolute", the left and right attributes are specified. I can do the IMG over DIV with absolute positioning, but I need the IMG to always be at the bottom of the first DIV so I need the relative positioning, but I can't manage to get it working right...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #theimage { background-image: url("http://atlantichosting.net/images/logo.gif"); background-repeat: no-repeat; width: 295px; height: 90px; position: absolute; left: 302px; bottom: -45px; z-index: 2; } #block1, #block2 { padding: 40px 20px; background-color: #0f0; position: relative; width: 900px; margin: 0 auto; } #block2 { background-color: #f00; z-index: 1; } --> </style> </head> <body> <div id="block1"> <p>Block1</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <div id="theimage"></div> </div> <div id="block2"> <p>Block 2</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> </body> </html> HTML:
Wow, wonderful this is what I was looking for tolra, it works just as it should now. Also thanks to everyone else!
Don't know if absolute positioning is the right way tbh. If I resize my browser to 1280x1024, what happens then?
Did you try it? The OP didn't say if they wanted fluid of fixed width, so I went fixed width as it's less effort. If you try it you'll find that the image stays put relative to the divs.
I'll just add as an alternative you could cut the image in half and put each half as a background to the appropriate div aligned to the top and bottom of the div as appropriate, it's even simpler but may not work if the image is being uploaded by end users and such like.
bottom:-45px; Hm, anyway. He got his "solution". My solution would be: #theimage { background-image: url("http://atlantichosting.net/images/logo.gif"); background-repeat: no-repeat; width: 295px; height: 90px; position: absolute; left: 302px; overflow:auto; z-index: 2; } Code (markup):
Damn... The problem is solved 99% but for some reason the IMG wont display outside the parent DIV from the DIV it was placed in. My two DIVs are nested within many other DIVs, and while the solution does work, it seems that the other parent DIVs are somehow "blocking" the IMG from displaying on top of them. :\ Do all my other DIVs on the page, that are parents of the two DIVs need to have "position:relative" and "z-index" set to below of the IMG? I still can't manage to understand the CSS logic, it seems so much more complicated then it should be....
As we said before it is better if you paste your CSS/HTML if you want us to help. Ofcourse, the image-div should have a higher z-index than the other 2 divs...
It's a LOT of CSS/HTML to paste here, and it would take me a lot of time to just get the important parts, but as I already have the most important part of the problem solved, I think I'm going to able to get this working sooner or later.