Question

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?

Answer 1

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;
 }