意外的 css position:absolute 行为
Unexpected css position:absolute behavior
我的 css
职位有问题。例如,当我在元素上设置 position absolute
时,它们在页面上得到 space 但不会 show.My 代码如下 (我在一些旧的标签框上做的我曾经有)。希望有人知道这个的解决方案,任何帮助将不胜感激!
$(".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
添加 class 但是当我设置绝对时它不会显示它。
是你的 #tabBoxContent
CSS 破坏了它。如果您删除 overflow: auto
,它应该使绝对定位的元素再次显示。
话又说回来,根据你的问题,或者你为什么把 overflow: auto
放在首位,你到底想达到什么目的并不明显。
我的 css
职位有问题。例如,当我在元素上设置 position absolute
时,它们在页面上得到 space 但不会 show.My 代码如下 (我在一些旧的标签框上做的我曾经有)。希望有人知道这个的解决方案,任何帮助将不胜感激!
$(".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
添加 class 但是当我设置绝对时它不会显示它。
是你的 #tabBoxContent
CSS 破坏了它。如果您删除 overflow: auto
,它应该使绝对定位的元素再次显示。
话又说回来,根据你的问题,或者你为什么把 overflow: auto
放在首位,你到底想达到什么目的并不明显。