css 질문 다시 드려봅니다....

css 질문 다시 드려봅니다....

QA

css 질문 다시 드려봅니다....

본문

<style>

.wrap {width:900px;padding:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;border:1px solid black;}

.container {width:400px;height:95px;overflow:hidden; padding:10px;margin:10px;}

.container .box1 {width:100%;height:100px;border:1px solid red;background:#ccc;}

.container .box2 {width:100%;height:100px;border:1px solid red;margin-top:5px;background:red;}

.container:hover {overflow:visible;}
.box2:hover + .container {overflow:visible;}

</style>

 

<div class="wrap">
  <div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
  </div>
  
   <div class="container">
    <div class="box1">box3</div>
    <div class="box2">box4</div>
  </div>
  
   <div class="container">
    <div class="box1">box5</div>
    <div class="box2">box6</div>
  </div>
  
   <div class="container">
    <div class="box1">box7</div>
    <div class="box2">box8</div>
  </div>
  
   <div class="container">
    <div class="box1">box9</div>
    <div class="box2">box10</div>
  </div>
  
   <div class="container">
    <div class="box1">box11</div>
    <div class="box2">box12</div>
  </div>
</div>

 

이렇게 해서 

3659984447_1681615594.4478.png

이렇게 하고 싶은데...

 

3659984447_1681615618.0798.png

이렇게 나옵니다....

그니까 box2가 box5 를 덮고싶은데

안됩니다... 도와주세요......

 

https://codepen.io/phreun/pen/eYPZRxY

이 질문에 댓글 쓰기 :

답변 1

.container:hover {overflow:visible;} 이부분에서 

.container:hover {overflow:visible;z-index:1} 뒤에 z-index:1 부분 추가해주시면 됩니다. 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT