CODEWITHSUNDEEP
htmlcssz-index
Nick Russler
Nick Russler

Reputation: 4694

Box-shadow being cut off for floating boxes next to each other

The box-shadow of a floating div is cut off by it's right neighbour, but not on the left side.

I played with z-index and overflow: visible but it did not work.

HTML:

<div class="doc-page"></div>
<div class="doc-page active"></div>
<div class="doc-page"></div>

CSS:

.doc-page {
    float: left;
    width: 141px;
    height: 200px;
    border: 1px solid black;
    background-color: white;
}
.active {
    box-shadow: 0 0 5px 5px #888;
}

Result:
Shadow is cut off

Fiddle: http://jsfiddle.net/au5Lv/1/

Upvotes: 3

Views: 4369

Answers (3)

dzny
dzny

Reputation: 374

z-index is still the answer, but you can only apply z-index on an element with position:relative, or position:absolute.

So apply position:relative to all of your elements, and then apply the z-index to the active one.

Upvotes: 7

Kheema Pandey
Kheema Pandey

Reputation: 10275

you need to add z-index value; When using z-index value position have to defined as well. 

.active {
    box-shadow: 0 0 5px 5px #888;
  z-index:1;
  position:relative;
}

Here is working Demo http://jsbin.com/keyilono/1/

Upvotes: 1

Aniruddha Pondhe
Aniruddha Pondhe

Reputation: 1870

SOLVED:

Fiddle: http://jsfiddle.net/aniruddha153/HKj9P/

HTML:

<div class="doc-page"></div>
<div class="doc-page active"></div>
<div class="doc-page"></div>

CSS:

.doc-page {
    float: left;
    width: 141px;
    height: 200px;
    border: 1px solid black;
    background-color: white;
    position:relative;
    z-index:0;
}
.active {
    position:relative;
    z-index:9999;
    box-shadow: 0 0 5px 5px #888;
}

Upvotes: 3

Related Questions