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>
이렇게 해서
이렇게 하고 싶은데...
이렇게 나옵니다....
그니까 box2가 box5 를 덮고싶은데
안됩니다... 도와주세요......
답변 1
.container:hover {overflow:visible;} 이부분에서
.container:hover {overflow:visible;z-index:1} 뒤에 z-index:1 부분 추가해주시면 됩니다.
감사합니다. Feelz996님.
z-index 도 넣어봤는데 안되서 질문한건데
다시 해보니 되네요.... ㅡㅡ;
감사합니다~
