예기치 않은 CSS 위치 : 절대적인 동작

Question

css 위치에 문제가 있습니다. 예를 들어, 요소에 position absolute을 설정하면 페이지에 공간이 생기지 만 표시되지 않습니다. 내 코드는 다음과 같습니다. (내가 사용하는 일부 이전 tabb 상자에서 수행). 희망은 누군가가 이것에 대한 해결책을 알고, 어떤 도움을 많이 주시면 감사하겠습니다!

$(".tabBoxContainer").css({ 
 
    "position": "absolute", 
 
    "top": "50px", 
 
    "float": "none", 
 
    "z-index": "100" 
 
});

#tabBoxContent { 
 
    position: relative; 
 
    top: 50px; 
 
    overflow: auto; 
 
} 
 

 
.tabBoxContainer { 
 
    position: relative; 
 
    float: left; 
 
    color: #232323; 
 
} 
 

 
.fixedTabContent { 
 
    position: absolute !important; 
 
    top: 50px !important; 
 
    left: 0 !important; 
 
} 
 

 
.tabBoxArticle { 
 
    float: left; 
 
    width: 33%; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
} 
 

 
.tabBoxArticle img { 
 
    width: 90%; 
 
} 
 

 
.tabBoxArticle h1 a { 
 
    color: #222 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="tabBoxContent"> 
 
    <div class="tabBoxContainer" id="tabBoxHTML"> 
 
    <div class="tabBoxArticle"> 
 
     <img src="img/juneca-rebra.jpg" alt=""> 
 
     <h1><a href="#">Lorem ipsum dolor sit amet</a></h1> 
 
    </div> 
 
    <div class="tabBoxArticle"> 
 
     <img src="img/jaja-sa-sunkom.jpg" alt=""> 
 
     <h1><a href="#">Lorem ipsum dolor sit amet</a></h1> 
 
    </div> 
 
    <div class="tabBoxArticle"> 
 
     <img src="img/keciga.jpg" alt=""> 
 
     <h1><a href="#">Lorem ipsum dolor sit amet</a></h1> 
 
    </div> 
 
    </div> 
 
    <!-- /#tabBoxContainer --> 
 
    <div class="tabBoxContainer" id="tabBoxCSS"> 
 
    <div class="tabBoxArticle"> 
 
     <img src="img/piletina-na-mlimarski-nacin.jpg" alt=""> 
 
     <h1><a href="#">Somme dummy long article title</a></h1> 
 
    </div> 
 
    <div class="tabBoxArticle"> 
 
     <img src="img/pohovana-paprika.jpg" alt=""> 
 
     <h1>Somme dummy long article title</h1> 
 
    </div> 
 
    <div class="tabBoxArticle"> 
 
     <img src="img/pohovani-sir.jpg" alt=""> 
 
     <h1>Somme dummy long article title</h1> 
 
    </div> 
 
    </div> 
 
    <!-- /#tabBoxContainer --> 
 
    <div class="tabBoxContainer" id="tabBoxJQuery"> 
 
    <div class="tabBoxArticle"> 
 
     <img src="img/rriblji-paprikas.jpg" alt=""> 
 
     <h1>Dummy long article title</h1> 
 
    </div> 
 
    <div class="tabBoxArticle"> 
 
     <img src="img/sat1.jpg" alt=""> 
 
     <h1></h1> 
 
    </div> 
 
    <div class="tabBoxArticle"> 
 
     <img src="img/satova-zakuska.jpg" alt=""> 
 
     <h1>Dummy long article title</h1> 
 
    </div> 
 
    </div> 
 
    <!-- /#tabBoxContainer --> 
 
</section> 
 
<!-- /#tabBoxContent -->

는 또한 jquery 가지는 클래스를 추가로 시도하지만 절대 설정할 때를 표시하지 않을 것이다.

Answer 1

그것은 당신의 #tabBoxContent CSS입니다. overflow: auto을 제거하면 절대 배치 된 요소가 다시 표시되어야합니다.

다시 말해, 귀하의 질문에 근거하여 정확히 달성하려는 것이 분명하지 않거나 처음에 overflow: auto을 넣은 이유가 무엇인지 분명하지 않습니다.