CSS에서 다른 div 아래에 div를 표시하는 방법
P粉463418483
2023-08-30 11:28:21
<p>.content라는 div 안에 두 개의 div가 중첩되어 있습니다. 그 안에 img.png가 있고 그 안에 몇 개의 상자가 있는 또 다른 div가 필요합니다. 이 div는 img.png</p>
<pre class="brush:php;toolbar:false;"><div class="navBox">
<a href="#contact">/*연락처 정보*/</a>
</div>
<div class="navBox">
<a href="#expertise">/*전문성*/</a>
</div>
<div class="navBox">
<a href="#projects">/*프로젝트*/</a>
<p>또한 위치 지정, 패딩, 여백 등 가능한 모든 조합을 시도했지만 z-index(사용 방법을 잘 모르겠습니다)는 시도하지 않았으나 좋은 결과를 얻지 못했습니다. </p>
<p>미리 감사드립니다. </p>
<p>*편집: 다른 배포 방법을 사용할 수 있었습니다. </p>
<pre class="brush:php;toolbar:false;">.mainBox{
위치: 상대;
디스플레이: 플렉스;
너비: 95%;
높이: 25vh;
패딩 상단: 5vh;
justify-content: 공간 균등하게;
항목 정렬: 왼쪽;
수직 정렬: 중간;
}
.navBox{
패딩 상단: 25px;
왼쪽 패딩: 10px;
오른쪽 패딩: 10px;
너비: 20%;
높이: 20vh;
텍스트 정렬: 중앙;
최고: 50%;
배경: 투명;
}
.navBox a:hover{
패딩 상단: 50%;
배경: 투명;
색상: var(--text-color);
텍스트 장식: 없음;
}
a:방문함, a:활성, a:링크{
텍스트 장식: 없음;
색상: var(--text-color);
}
.navBox a{
수직 정렬: 중간;
색상: var(--text-color);
패딩 상단: 0.5rem;
}</pre></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
다음에는 스크린샷 대신 코드를 공유해 주세요. 어쨌든 여기 Z-색인을 사용하지 않은 샘플 코드가 있습니다
HTML
으아악CSS
으아악기본적으로 1x1 그리드를 만들고 동일한 열과 행에 두 개의 div를 겹칩니다.
https://codepen.io/ChrisCoder9000/pen/NWMJdBo