드롭 다운 메뉴를 바닥 글로 배치하려고합니다. 메뉴가 hover 이벤트를 받으면 그 위에 항목 컨테이너를 배치해야하지만, 항목 컨테이너의 크기는 동적 일 수 있으므로 올바르게 배치해야합니다.
<div class="wrapper">
<div id="div1" class="div1">ITEM CONTAINER</div>
<div id="div2" class="div2">MENU</div>
</div>
이것은 내가 얻은 옷장입니다 : https://jsfiddle.net/Y4kga/61/
하지만 문제는 div1의 높이를 변경하면 메뉴도 내려 간다는 것입니다. 내가 지정한 위치 (margin-top : 100px)에 유지하려면 메뉴가 필요합니다. jquery없이 어떻게 이것을 수행 할 수 있습니까? 감사!
여기에서 이와 비슷한 것을 시도 할 수 있습니다.
http://codepen.io/petethewizard/pen/ByqYQM
코드는 다음과 같습니다. html :
<div id="wrapper">
<div id="above">
Test text. Test text. Test text. Test text. Test text.
Test text. Test text. Test text. Test text. Test text.
</div>
<div id="below"></div>
</div>
SASS / CSS :
#wrapper {
margin-top: 400px;
position: relative;
width: 120px;
height: 50px;
overflow: visible;
#above {
position: absolute;
bottom: 100%;
left: 0;
width: 300px;
background:skyblue;
}
#below {
width: 120px;
height: 50px;
background:green;
}
}
#above 요소의 높이를 원하는대로 설정하거나 자동으로 둘 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다