如何让一个部分稍微超过上一部分

时间:2017-03-31 08:08:03

标签: html css

我需要帮助让“发型”部分流过“滑块”部分,如示例页面(example)所示。

注意:这是我在这个平台上的第一个问题,所以告诉我我是否做错了

.slider {
  width: 100%;
}

.coiffure {
  background-color: white;
}

.coiffure h1,
h5 {
  text-align: center;
}
<section class="slider">
  <div class="hidden-xs col-sm-12">
    <img class="img-responsive" src="img/2.jpg">
  </div>
</section>
<section class="coiffure">
  <div class="col-xs-6 col-xs-offset-3">
    <div class="row">
      <h1>COIFFURE</h1>
      <h5>VOOR DAMES</h5>

      <p>Laat u vakkundig verwennen door het AVENUE coiffure team. Snit &#45;kleur&#45;lok &#45; en ombre technieken hebben voor ons geen geheimen meer.</p>
      <br>
      <p>Opgeleid en begeleid door het L&#39; oreal Professionelle team staan wij garant voor de laatste nieuwe technieken. Onze hoofdhuid en haarverzorgingsprodukten van Kerastase zorgen mee voor een subliem eindresultaat!</p>
    </div>
    <div class="row">
      <img class="img-responsive" src="img/avenue-concept-coiffure-dames-heist-op-den-berg.jpg">
    </div>
    <div class="row">
      <p>Bovendien ontwikkelden we voor u het ultieme comfort in een totaal nieuwe setting:</p>
      <ul>
        <li>Meer rust, dankzij twee verschillende werkruimtes</li>
        <li>Meer flexibiliteit, dankzij verplaatsbaar meubilair</li>
        <li>Meer rust, dankzij wasunits met zicht op de tuin</li>
      </ul>
      <p>Ontdek en ervaar!</p>
    </div>
  </div>
</section>

1 个答案:

答案 0 :(得分:0)

你有很多选择可以做到,但我会说明一些选项如何让它与滑块重叠

第一个是在&#34;发型部分&#34; 中添加负边距 - 顶部以使该部分拉回到顶部,只需添加zindex并将位置置于顶部&#34;滑块部分&#34;

第二个是给滑块一个位置:绝对并在主体上添加填充以便它向下推