CSS show div background over image element

StackOverflow https://stackoverflow.com/questions/22497200

質問

I have this HTML: demo

<div class="container">
    <img class="image" src="someUrl">
    <div class="gradientDown"></div>
    <div class="gradientUp"></div>
</div>

with this CSS:

.container {
    position:relative;
    width:100%;
    height:100%;
    padding-top:70.5px;
}

.gradientDown {
    position:absolute;
    top:0;
    width:100%;
    height:100px;
    background:linear-gradient(to bottom, rgba(40,40,40,1), rgba(40,40,40,0));
}

.gradientUp {
    position: absolute;
    bottom:0;
    width:100%;
    height:100px;
    background:linear-gradient(to top, rgba(40,40,40,1), rgba(40,40,40,0));
}

I would like the gradient divs to overlap over the image, which is visibly hovering between them. I've tried tweaking around the z-indexes, positions, and displays, and I can't seem to find a way to do it. They always come out underneath the image.

役に立ちましたか？

解決

*Now Define your img z-index property *

as like this 

img{
    position:relative;
    z-index:1;  
}

Demo

More about z-index

他のヒント

z-index doesn't work on elements that have position:static (the default). If you give your img some positioning the z-index should work.

<html>
<head>
    <style>
        div{
            position:  relative;
        }
        .container {
            position:relative;
            width:100%;
            height:100%;
            padding-top:70.5px;
        }

        .gradientDown {
            position:relative;
            margin-top: -300px;
            top:0;
            width:100%;
            height:100px;
            background:linear-gradient(to bottom, rgba(40,40,40,1), rgba(40,40,40,0));
        }

        .gradientUp {
            position: relative;
            bottom:0;
            width:100%;
            height:100px;
            background:linear-gradient(to top, rgba(40,40,40,1), rgba(40,40,40,0));
        }
    </style>
</head>
<body>
<div class="container">
    <div><img class="image" src="someurl"></div>
    <div class="gradientDown"></div>
    <div class="gradientUp"></div>
</div>
</body>
</html>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top