CSS Z-Index issues

Question

I am trying to get the z index order to adjust so that the first class is closer than the second class.

But I cannot for the life of me get a box-shadow to show.

    .title {
        background-image: linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);
        background-image: -o-linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);
        background-image: -moz-linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);
        background-image: -webkit-linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);
        background-image: -ms-linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.33, rgb(249,252,249)),
            color-stop(0.37, rgb(255,255,255))
        );
        box-shadow: 0px 1px 5px rgba(0,0,0,1);
        height: 50px;
        z-index: 1;
    }

.banner {
    background-image:url('images/grad.jpg');
    background-color:#cccccc;
    height: 500px;
    z-index: -1;
}

But this does not work for me.

markup>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Design Test | PolyDevs</title>
<link rel="stylesheet" type="text/css" href="style.css">
<div class="header">
    <div class="title">
        <div class="logo">
            <img src="images/banner.png"/>
        </div>
    </div>
</div>
</head>
<body>
<div class="banner">

</div>
</body>
</html>

Can you share your markup (HTML) as well? `z-index` is [set relatively](http://stackoverflow.com/questions/7482840/z-index-order-for-draggable-div/7482870#7482870) so your markup matters... — Ben D, Oct 26 '13 at 23:23
Is the parent element for banner set to `position: relative`? I know that's tripped me up in the past — aviemet, Oct 26 '13 at 23:31
Position: relative; fixed my issue, why is that? Thanks a bunch guys — Daniel Watson, Oct 26 '13 at 23:33

score 0 · Answer 1 · answered Oct 26 '13 at 23:52

Position: relative; fixed my issue, why is that?

Absolute positioned elements behave positioned by one parent element that is positioned relative.

If no element is positioned relative, then the <body> element, that is by default relative positioned, will become the parent that specifies the "from" position (left, right, bottom, top)

example:

<body>
 <div class="posrelative">
  <div class="posabsolute">hello world</div>
 </div>
 </body>

Hello world could no be positioned absolute based on where the parent wrapper <div> would be, this could be the sidebar, or footer etc...

<body>
 <div>
  <div class="posabsolute">hello world</div>
 </div>
</body>

Hello world could now be positioned absolute, but not anymore based on the position from the parent <div>, but based on the position off the <body>, that fills up the entire width of your browser window by default

CSS Z-Index issues

1 Answers1