Question

请检查以下小提琴 HTML结构和Css几乎相同。我在我的项目中使用。目前我的设计中有3个部分 HEADER 投资组合滑块令人不安的部分

我正在使用bootstrap 3最新版本。

我已经给出了相对于投资组合部分的位置及其内部区块以绝对顶部位置：-50px;

这里的一切都很好。但当我添加新的部分“滑块”时出现问题。它正在投资组合部分。我试过给它位置和不同的块属性。但仍有滑块部分来自投资组合部分。当我从投资组合部分中删除头寸滑块部分回到正常位置，这就是我想要的。任何人都可以检查以下小提琴，告诉我我做错了什么。设计就像投资组合部分略微超过标题。这就是我使用职位的原因。

<script async src="//jsfiddle.net/DTcHh/29616/embed/"></script>
https://jsfiddle.net/DTcHh/29616/

Answer 1

尝试添加容器类的height属性。它应该工作：

.container{
    height: 100px;
}

Answer 2

我宁愿不使用position：绝对不需要它因为它打破了流程。您只需要定位相对或负边距顶部即可向上移动元素。请参见示例https://jsfiddle.net/DTcHh/29623/

<header class="container-fluid header">
  <div class="row">
    <h1>HEADER</h1>
  </div>
</header>
<section class="container">
  <div class="row position-relative">
    <div class="col-sm-10 col-sm-offset-1 position-relative-col">
      <div class="height">
      <h2>Some Portfolio items here</h2>
      </div>
    </div>
  </div>
</section>
<section class="container trouble">
  <div class="row">
    <h3>Slider Troubling section</h3>
  </div>
</section>

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.header {
  background: lightblue;
  padding:25px;
}
.position-relative {
  position:relative;
}
.position-relative-col {
  background: green;
  position: relative;
  top: -50px;
}
.trouble {
  background: darkblue;
  opacity: 0.8;
  color: white;
}
.height {
  height: 100px;
}

Answer 3

检查我的更新我希望它有所帮助。

http://jsfiddle.net/DTcHh/29626/

我所做的是将滑块和投资组合放入使用position:relative和top: -50px;

的相同标记中

Answer 4

您正在使用bootstrap 3网格错误。对于每一行，您必须添加row类，并且对于row类中的每个项目，您必须使用类col-*-*。我已经根据你的代码编写了一些正确使用bootstrap网格的新代码。

http://jsfiddle.net/DTcHh/29627/

如果这不好，请告诉我，以及您尝试实现的目标。

Css Position Relative / Absolute扰乱布局

4 个答案: