Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

unable to overlap DIVs

unable to overlap DIVs

Problem

I'm having a slight issue getting an image in my carousel to overlap over another div. click here

If you click on the red tab, i am trying to the image of the bottle to sit on top of the white box (#section1). I have noticed when i remove position:relative from .rslides the carousel image does what i want it to do, however the background image i have placed in #rslides1 goes infront...

I have tweaked around with the z-index property however, i'm still Unable to achieve it. Does anyone have a solution to the problem?

Problem courtesy of: NewBoy

Solution

It worked when i changed my css properties to the following:

#header{
    max-width: 1018px;
    min-width: 320px;
    width: 100%;
    margin: 0 auto;
    z-index: 10;
    position: relative;
} 

.rslides {
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin-top: -275px;
    float: left;
    z-index: -1;
 }

.rslides_tabs { 
    margin: 93px auto 0; 
    position: relative; 
    width: 100%; 
    max-width: 1011px; 
    z-index: 10;
 }
Solution courtesy of: NewBoy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

unable to overlap DIVs

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×