[html] CSS를 사용하여 요소를 맨 앞으로 가져 오기

Program / 글쓴이

을 사용하여 이미지를 앞으로 가져 오는 방법을 알 수 없습니다 CSS. 이미 z-index를 1000으로 설정하고 상대적으로 위치를 설정했지만 여전히 실패합니다.

여기에 예가 있습니다.

#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;
}
.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>

스 니펫 확장

답변

.content에 z-index:-1및 추가position:relative

#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>

스 니펫 확장

답변

주 : Z-인덱스 만 위치에서 작동 요소 ( position:absolute, position:relative나 position:fixed). 그 중 하나를 사용하십시오.

답변

제 경우에는 한 요소에 z- 인덱스가 있고 다른 요소에는 z 인덱스가 없으면 작동하지 않기 때문에 원하는 요소의 html 코드를 html 파일의 끝 부분에 옮겨야했습니다.

답변

또 다른 참고 : Z- 색인은 다른 개체와 관련된 하위 개체를 볼 때 고려해야합니다.

예를 들면

<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>

당신이 준 경우 branch_1__child의 Z- 인덱스 99당신은 준 branch_2__child하나의 Z- 인덱스,하지만 당신은 또한 당신의 준 branch_2의 Z- 인덱스 10와 branch_1의 Z- 색인을 1, 당신은 branch_1__child여전히 앞에가 표시되지 않습니다branch_2__child

어쨌든, 내가 말하려는 것은; 앞에 배치하려는 요소의 상위 요소의 Z- 색인이 상대적인 요소보다 낮은 경우 해당 요소는 더 높은 위치에 배치되지 않습니다.

Z- 색인은 컨테이너에 상대적입니다. 계층 구조에서 더 먼 컨테이너에 배치 된 Z- 색인은 기본적으로 새로운 “레이어”를 시작합니다.

Incep [시작]

여기에 연주 할 바이올린이 있습니다.

https://jsfiddle.net/orkLx6o8/

답변