div를 BODY로 중심에 두는 방법 부모가 아닙니다.

Question

마우스를 가져 가면 "categoriesDropdown"메뉴가 드롭 다운되는 "categories"탭이있는 끈적 메인 메뉴가 있습니다.

• 나는 화면의 폭을 가지고 있고, 화면의 중앙에 로 드롭 다운 메뉴가 필요합니다.

• 메인 메뉴 하단에 고정하려면 드롭 다운 메뉴가 필요합니다.

유일한 문제는 본문에 드롭 다운 메뉴를 가운데에 배치 할 수 없다는 것입니다. 부모 div (카테고리)에만 상대적으로 배치 할 수 있습니다. 내가 사용하는 코드는 아래에 표시됩니다.

<div class="categories"> 
    <a>Categories</a> 
    <div id="categoriesDropdown"></div> 
</div> 

CSS

.categories { 
    padding-left: 20px; 
    padding-right: 20px; 
    height: 45px; 
    display: inline-block; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

#categoriesDropdown { 
    position: absolute; 
    background: #1d1d1d; 
    width: 100vw; 
    height: 0px; 
    z-index: -1; 
    overflow: auto; 
} 

#categoriesDropdown.show { 
    height: 500px; 
} 

편집 : 내가 왼쪽하려고 할 때 발생 : 0; 오른쪽 : 0; the grey square being the drop down menu

Answer 1

CSS 만 있으면 까다 롭지 만 jQuery와 CSS에서는 가능한 해결책이 있습니다. 나는 이것이 당신의 도움이 될지 확신하지 못합니다.

바디

<div class="categories"> 
    <a>Categories</a> 
    <div id="categoriesDropdown" class="categoriesDropdown"> </div> 

CSS는

body{ 
    margin : 0px; 
    padding : 0px; 
    } 
    .categories { 
    padding-left: 20px; 
    padding-right: 20px; 
    height: 20px; 
    display: inline-block; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    cursor : pointer; 
    top: 50px; 
    position: absolute; 
    } 
    .categoriesDropdown { 
    position: relative; 
    background: #1d1d1d; 
    width: 98vw; 
    height: 0px; 
    z-index:-1; 
    overflow:auto; 
    margin:0 auto; 
    color:#fff; 
    } 
    .categoriesDropdown_show { 
    height: 100px; 
    } 

스크립트

$(document).ready(function(){ 

    var c = $(".categories"); 
    var position = c.position(); 

    $(".categories").mouseenter(function(){ 
     $("#categoriesDropdown").appendTo('body'); 
     $(".categoriesDropdown").addClass("categoriesDropdown_show"); 
     $('#categoriesDropdown').css({'top':'calc('+position.top +'px + 20px)'}); 
    }); 
    $(".categories").mouseleave(function(){ 
     $(".categoriesDropdown").removeClass("categoriesDropdown_show"); 
     $("#categoriesDropdown").appendTo('categories'); 
    }); 
    });