Question

I see divs act like active boxes and I thought there must be a way for it, rather than adjusting color of the page or creating a layer and bringing the focused div to the front using z index.

I want to shadow everything on the page, except for the div I want to show to the user.
Like facebooks shows the pictures in front but you can still see the page with some 50% opacity in the background.

Answer 1

Create an element to cover the entire page:

<div id="modal"></div>

Style it:

#modal {
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 100;
}

Only show it when you need to. Next create a class for elements we want above this:

.overModal {
    position: relative;
    z-index: 200;
}

Demo: http://jsfiddle.net/jonathansampson/pVUHP/