CODEWITHSUNDEEP
cssz-index
Yobogs
Yobogs

Reputation: 452

Put image between 2 div with z-index

I try to position image between .previewSlide div and .PreviewArrowUl with z-index.

The z-index of .previewSlide is 1, the .PreviewArrowUl is 5 and my img is 20 but PreviewArrowUl is over the img.

.previewSlide {
    height: 110px;
    background-color: #484848;
    z-index: 1;
    overflow: hidden;
    position: relative;
}

.PreviewArrowUl {
    position: absolute;
    background: #9b9b9b;
    height: 125px;
    width: 185px !important;
    z-index: 5;
    left: 185px;
    top: 0px;
    background-color: #9b9b9b;
}

.previewSlide ul li img {
    width: 155px;
    height: 85px;
    float: left;
    z-index: 20;
    position: relative;
}

You can check my example in this JSFiddle.

Anyone have an idea why my image is under the PreviewArrowUl ?

Upvotes: 3

Views: 335

Answers (1)

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13938

absolutely positioned elements shall always overlap the statically positioned element (default).

Here the explanation...

The precedence of z-index is as follows

  1. canvas (where the element is drawn / parents drawable area)
  2. bg images
  3. z-index: -1
  4. default (0)
  5. z-index: 1+

So when you give any child element a z-index of -1, it won't go below the parents background because of the parents precedence. Also z-index only works on positioned elements. So assigning the z-index to an element without any position assigned (even though defaults to static) wont have any effect on its position in stack .

Upvotes: 4

Related Questions