发表新帖
发表新帖

Bring element to front using CSS

前端 未结
关注
4 1684
名媛妹妹
名媛妹妹 2020-12-12 20:05

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.

He

相关标签:
4条回答
  • 别那么骄傲
    2020-12-12 20:35

    Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Use one of those.

    0 讨论(0)
  • 终归单人心
    2020-12-12 20:41

    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>

    0 讨论(0)
  • 北荒
    2020-12-12 20:43

    In my case i had to move the html code of the element i wanted at the front at the end of the html file, because if one element has z-index and the other doesn't have z index it doesn't work.

    0 讨论(0)
  • 名媛妹妹
    2020-12-12 20:56

    Another Note: z-index must be considered when looking at children objects relative to other objects.

    For example

    <div class="container">
    <div class="branch_1">
        <div class="branch_1__child"></div>
    </div>
    <div class="branch_2">
        <div class="branch_2__child"></div>
    </div>
</div>

    If you gave branch_1__child a z-index of 99 and you gave branch_2__child a z-index of 1, but you also gave your branch_2 a z-index of 10 and your branch_1 a z-index of 1, your branch_1__child still will not show up in front of your branch_2__child

    Anyways, what I'm trying to say is; if a parent of an element you'd like to be placed in front has a lower z-index than its relative, that element will not be placed higher.

    The z-index is relative to its containers. A z-index placed on a container farther up in the hierarchy basically starts a new "layer"

    Incep[inception]tion

    Here's a fiddle to play around:

    https://jsfiddle.net/orkLx6o8/

    0 讨论(0)
 看不清?
提交回复
热议问题