2017-12-17 4 views
0

cssの位置に問題があります。たとえば、要素にposition absoluteを設定すると、ページ上にスペースが表示されますが、表示されません。のように、私のコードはとなります。誰かがこれに対する解決策を知っていることを願って、どんな助けも大いに評価されるでしょう!予期しないCSSの位置:絶対的な動作

$(".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でクラスを追加して試してみましたが、私は絶対的な設定すると、それはそれは表示されません。

答えて

1

あなたの#tabBoxContentのCSSはそれを破っています。 overflow: autoを削除すると、絶対配置された要素が再び表示されるはずです。

また、あなたの質問に基づいて、あなたが達成しようとしていることが明らかではないか、最初にoverflow: autoを置くのはなぜですか?

関連する問題