Bring element to front using CSS

html css z-index jsfiddle
Stylock picture Stylock · Apr 3, 2013 · Viewed 437.4k times · Source

I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails.

Here's example-

Answer

Sowmya picture Sowmya · Apr 3, 2013

Add z-index:-1 and position:relative to .content

#header {
    background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
    background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
    height: 128px;
}
.content {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
    z-index: -1;
    position:relative;
}
.td-main {
    text-align: center;
    padding: 80px 10px 80px 10px;
    border: 1px solid #A02422;
    background: #ABABAB;
}
<body>
    <div id="header">
        <div id="header-inner">
            <table class="content">
                <col width="400px" />
                <tr>
                    <td>
                        <table class="content">
                            <col width="400px" />
                            <tr>
                                <td>
                                    <div class="logo-class"></div>
                                </td>
                            </tr>
                            <tr>
                                <td id="menu"></td>
                            </tr>
                        </table>
                        <table class="content">
                            <col width="120px" />
                            <col width="160px" />
                            <col width="120px" />
                            <tr>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <!-- header-inner -->
    </div>
    <!-- header -->
</body>

Related questions

Minimum and maximum value of z-index?

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor. I have tried all values for z-index from 0 …

Read More
Why does z-index not work?

So if I understand z-index correctly, it would be perfect in this situation: I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this? …

Read More
Floating Div Over An Image

I'm having trouble floating a div over an image. Here is what I am trying to accomplish: In this image: I want the "Featured" box to float over top of the image but instead it seems to "clear" the float …

Read More