意外的css位置：绝对行为答案

【问题标题】：Unexpected css position:absolute behavior意外的css位置：绝对行为
【发布时间】：2017-12-17 21:20:44
【问题描述】：

我的css 职位有问题。例如，当我在元素上设置position absolute 时，它们会在页面上获得空间但不会显示。我的代码如下（我在我曾经拥有的一些旧选项卡框上做了）。希望有人知道这个问题的解决方案，任何帮助将不胜感激！

$(".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 添加一个类，但是当我设置绝对时它不会显示它。

【问题讨论】：

标签： javascript jquery html css positioning

【解决方案1】：

破坏它的是你的#tabBoxContent CSS。如果你删除了overflow: auto，它应该会再次显示绝对定位的元素。

再一次，根据您的问题，或者为什么您首先将overflow: auto 放在上面，您究竟想要实现什么并不明显。

【讨论】：