How to set z-index for a shadow (CSS)


Tags: html,css

Problem :

Say I have a box with z-index:4 + CSS shadow. Say I have another box with z-index:2;

How do I make the shadow from the object 1 to be on top of object 2?


It's hard to give exact code.
http://craigsadposting.com
Click on "Log In" there and you'll see that one box is over another one. I wnat them to seem like one piece, but I can achieve that only if their z-index is below 0 which causes many design problems.


position:relative solved it. Thanks guys!



Solution :

Here is an example of what you are looking for

HTML

<div id="shadow"> </div>
<div id="under"> </div>

CSS

#shadow {
    background-color: #35BFFF;
    height: 300px;
    width: 100px;
    -moz-box-shadow: 0px 0px 11px rgba(0,0,0,1);
    -webkit-box-shadow: 0px 0px 11px rgba(0,0,0,1);
    box-shadow: 0px 0px 11px rgba(0,0,0,1);
    float: left;
    z-index: 999;
    position: relative;
}
#under {
    float: left;
    height: 300px;
    width: 100px;
    background-color: red;
    position: relative;
}
​

Live demo


    CSS Howto..

    How do I target a div without a class or id but with all these specific style-attributes

    How to make mobile menu transition “backwards”?

    How does ASP.NET generate HTML?

    When displaying an image in my directory, how to add a return (or back) button to it?

    How do i divide my webpage into 3 columns with css, frameset in html makes up too many pages to handle, how can i do it in css?

    How to distribute floated elements evenly with a dynamic column and row count in CSS?

    how to make a drop down menu fixed from the top with css?

    How to center [image + text] of unknown width?

    How to best make a hover navbar?

    HTML/CSS How to connect a list to h tag and word-spacing

    How to implement fluid font size using pure CSS

    How to add css properties inside the PHP tag

    How to create this layout using CSS

    How can i override this css behavior with jquery?

    How to center items inside isotope container?

    How do you apply a fading overlay to an image in CSS?

    How to rotate top-border around the circle?

    How to reproduce the following effect in CSS, stuck at padding(I think) Bootstrap 3.0

    How to hover mutiple “div” in the same time?

    How to put html input text into an image using CSS?

    How to make one circle inside of another using CSS

    CSS Selector-How to locate Parent Element

    How do I disable the shadow only on one edge?

    How to use css in asp.net for web server control?

    How to Change Error Message Css Style (Parsley)

    How to position child div to the center of every parents div using position absolute in css [duplicate]

    How to make these scale right in CSS (block with horizontal and vertical attachés)

    How to get a style attribute from a CSS class by javascript/jQuery?

    how to have css affect other divs in the same container

    jquery - How to determine if a div changes its height or any css attribute?