CSS를 사용하여 요소를 맨 앞으로 가져 오기
을 사용하여 이미지를 앞으로 가져 오는 방법을 알아낼 수 없습니다 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>
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/
참고URL : https://stackoverflow.com/questions/15782078/bring-element-to-front-using-css
'code' 카테고리의 다른 글
| 반환 값으로 저장 프로 시저 호출 (0) | 2020.10.29 |
|---|---|
| 명령 줄에 분기 계층 구조를 표시 하시겠습니까? (0) | 2020.10.29 |
| 노드 앱을 실행할 때 bcrypt 유효하지 않은 elf 헤더 (0) | 2020.10.29 |
| PostgreSQL에서 카테고리별로 최대 날짜 그룹으로 ID를 선택하는 방법은 무엇입니까? (0) | 2020.10.29 |
| 좋은 경량 Python MVC 프레임 워크는 무엇입니까? (0) | 2020.10.29 |