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

87

을 사용하여 이미지를 앞으로 가져 오는 방법을 알 수 없습니다 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>
스 니펫 확장

html  css  z-index  jsfiddle 
— Stylock
소스
무엇을 앞으로 가져와? 또한 <col> 은 더 이상 사용되지 않습니다 .
— Vucko
이미지를 앞으로 가져옵니다.
— Stylock 2013.04.03
메뉴를 만들기 위해 중첩 테이블을 사용하는 이유는 무엇입니까?
— Blender
2
IE8의 메뉴에 문제가 있었고 중첩 테이블이 수정되었습니다.
— Stylock
이 비디오 는 작동 방식을 이해하는 데 매우 유용합니다.
— J0ANMM

답변:

135

.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>
스 니펫 확장

— Sowmya
소스
2
귀하의 솔루션은 완벽하게 작동했습니다. 이것이 작동하는 이유를 설명해 주시겠습니까?
— Germstorm
1
@Germstorm Z-index은 이미지 또는 div가 서로 겹쳐지는 방식을 제어합니다. Z- 색인 값이 더 높은 Div / 이미지가 앞쪽에 배치되고 낮은 쪽이 뒤에 유지됩니다.
— Sowmya
나는 내 질문의 상황을 명확하게 기억하지 못하지만 내 문제는 내가 무엇을하는지 이해 z-index했지만 여전히 작동하지 않는다는 것입니다. 이 답변에서 배운 z-index것은 부모 계층도 고려해야한다는 것입니다.
— Germstorm
2
곧 카이에서 @Germstorm 최근 응답은 정확한 설명이다 소자가 위치하지 않는 경우, Z 인덱스가 아무런 영향을 미치지 않는다
— FelipeAls
2
@SpiderMan 어디에서 생각해 냈 +1습니까? 그것은 유효하지 않습니다.
— sjagr 2015 년
6

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

— Javobal
소스
답변의 두 부분은 관련이 없습니다 (적어도 다른 세부 정보는 없음). HTML 코드의 후자 요소와 동일한 다른 속성 이 이전 요소 위에 표시 되기 때문에 첫 번째 부분은 솔루션 입니다. 두 번째 부분은 Z- 색인이 어떤 영향을 미치는지에 대한 설명입니다.
— FelipeAls
1
모든 요소에 대한 좋은 점은 작동하려면 Z- 색인이 있어야합니다. 감사!
— Salah Saleh
3

또 다른 참고 : 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/

— ntgCleaner
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.