css 질문
본문
<div>
<ul>
<li>
<div class="dialog">#text</div>
1
</li>
</ul>
</div>
현재 소스가 저런데 div에 position:relative를 적용시키고 li에도 position:relative를 적용시켰습니다.
그리고 li에 마우스가 올라갔을때 div가 화면에 나타나는데요. ul부모 div에 overflow hidden이 있어서인지
div.dialog에 position:absolute를 적용시키면 li위로 올리면 div.dialog가 사라지네요.. z-index를 줘도 소용없습니다.. li뒤에 깔려서 dialog가 감춰지네요
이미지를 보다시피 농구공 이미지 위에 살짝 화살표 모양 보이시죠 저게 저렇게 감춰지네요..
앞으로 꺼내오려고 z-index를 줘봤지만 ul부모인 div에 overflow가 있어서 그런지.. 계속 감춰지네요
overflow를 없애니 잘 나오긴 하는데 overflow가 없으면 안돼서요.. 어떻게 해야하나요?
답변 1
overflow:hidden을 거는 요소는 position:static, 이 요소를 감싸는 position:relative 래퍼가 필요하며, 이요소 자식중 position:absolut로 이 요소의 영억 바깥으로 보여야 하는 요소까지의 직계들도 모두 position:static여야합니다. 말이 좀 어렵네요..코드펜보시면 이해가 되실겁니다.
답변을 작성하시기 전에 로그인 해주세요.