阻止容器div覆盖Bootstrap中的绝对相对div [英] Prevent container div from covering absolute-relative div in Bootstrap

问题描述

当 site-header 被设置为relative时，引导容器 div向上移动到站点头部空间像这样：

我把标题看起来像这样？

参考资料

<

  .site-header {padding-left：77.2px; padding-right：77.2px;宽度：100％; display：table;}。headerImage {height：483px;位置：绝对; top：0;左：0; z-index：1;}。headerText {padding：6％4％;宽度：60％;位置：相对;剩下：40％; display：table-cell; vertical-align：middle; z-index：2;}。row.standardPageContent {margin-top：250px;}  

 < header class =site-header> < img class =headerImagesrc =images / cornellCoverImageWetLab.png> < div class =headerText> < div class =title> Wet Lab< / div> < div class =subtitle>我们做了一些很酷的东西，并写下了这个标语< / div> < / DIV> < /报头> <！ - 侧边栏 - > < div id =sidebarclass =container> < div class =row standardPageContent> < div class =col-md-3 col-xs-3 sidebar> < UL> < li>< a href =＃overview> OVERVIEW< / a>< / li> < li>< a href =＃biobricks> BIOBRICKS< / a>< / li> < li>< a href =＃chassis> CHASSIS< / a>< / li> < li>< a href =＃results>结果< / a>< / li> < li>< a href =＃futurework>未来工作< / a>< / li> < li>< a href =＃references> REFERENCES< / a>< / li> < / UL> < / DIV> <！ - 页面内容 - > < div class =col-md-9 col-xs-9 content> < h1>< a id =overview>概述< / a>< / h1> < p>段落文字将会出现在这里< / p> < h1>< a id =biobricks> Biobricks< / a>< / h1> < h1>< a id =chassis> Chassis< / a>< / h1> < h1>< a id =results>结果< / a>< / h1> < h1>< a id =未来工作>未来工作< / a>< / h1> < h1>< a id =references>参考文献< / a>< / h1> < / div>< / div>  

解决方案

如果您可以为该页面提供完整的代码（至少是标题和概述容器行），我会给你解决方案。

请看看这个概念，以达到您的目标结构。

  *，：after，：before {-webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box;}。site-header {width：100％;位置：相对;背景：橙色; display：table;}。site-header .headerImage {width：50％;身高：100％;位置：绝对; top：0;左：0; z-index：1;}。site-header .headerText {background：rgba（213，123，75，0.6）;填充：10％10％10％40％; display：table-cell; vertical-align：middle;位置：相对; z-index：2;}。site-header .headerText .inner {background：#ccc; padding：30px 50px;}。site-header .headerText .inner .title {font-size：30px;}。overview-container-with-sidebar {width：100％;位置：相对;背景：棕色; float：left;}。sidebar {width：30％;显示：inline-block; float：left;}。overview-container {width：70％;显示：inline-block; float：left;}  

< header class =site -header> < img class =headerImagesrc =http://via.placeholder.com/990x250> < div class =headerText> < div class =inner> < div class =title> Wet Lab< / div> < div class =subtitle>我们做了一些很酷的东西，并写下了这个标语< / div> < / DIV> < / div>< / header>< section class =overview-container-with-sidebar> < div class =sidebar> < UL> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> <李>连结< /锂> < / UL> < / DIV> < div class =overview-container> < H2>概要< / H2> < p> sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium，totam rem aperiam，eaque ipsa quae ab ilo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo。 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit，sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt。 Neque porro quisquam est，qui dolorem ipsum quia dolor sit amet，consectetur，adipisci velit，sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem。你是否真的希望能够实现这个目标？ Quis autem vel eum iure repreenderit qui in ea voluptate velit esse quam nihil molestiae consequatur，vel illum qui dolorem eum fugiat quo voluptas nulla pariatur？< / p> < p> sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium，totam rem aperiam，eaque ipsa quae ab ilo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo。 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit，sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt。 Neque porro quisquam est，qui dolorem ipsum quia dolor sit amet，consectetur，adipisci velit，sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem。你是否真的希望能够实现这个目标？ Quis autem vel eum iure repreenderit qui in ea voluptate velit esse quam nihil molestiae consequatur，vel illum qui dolorem eum fugiat quo voluptas nulla pariatur？< / p> < / div>< / section>

When site-header is set to relative, the bootstrap containerdiv moves up into the site-header space like this:

How do I make the header look like this?

Reference

   

.site-header {
    padding-left: 77.2px;
    padding-right: 77.2px;
    width: 100%;
    display: table;
}

.headerImage {
    height: 483px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.headerText {
    padding: 6% 4%;
    width: 60%;
    position: relative;
    left: 40%;
    display: table-cell;
    vertical-align: middle;
    z-index: 2;
}

.row.standardPageContent {
  margin-top: 250px;
}

  

 <header class="site-header">
               <img class="headerImage" src="images/cornellCoverImageWetLab.png">
                <div class="headerText">
                    <div class="title">Wet Lab</div>
                    <div class="subtitle">We did some cool stuff and wrote this tagline</div>
                </div>
        </header>

    <!-- Sidebar -->
    <div id="sidebar" class="container">
        <div class="row standardPageContent">
            <div class="col-md-3 col-xs-3 sidebar">
        <ul>
            <li><a href="#overview">OVERVIEW</a></li>
            <li><a href="#biobricks">BIOBRICKS</a></li>
            <li><a href="#chassis">CHASSIS</a></li>
            <li><a href="#results">RESULTS</a></li>
            <li><a href="#futurework">FUTURE WORK</a></li>
            <li><a href="#references">REFERENCES</a></li>
        </ul>
        </div>

    <!-- Page Content -->
        <div class="col-md-9 col-xs-9 content">

                 <h1><a id="overview">Overview</a></h1>
                    <p>Paragraph writings will go here
                    </p>
                 <h1><a id="biobricks">Biobricks</a></h1>
                 <h1><a id="chassis">Chassis</a></h1>
                 <h1><a id="results">Results</a></h1>
                 <h1><a id="futurework">Future Work</a></h1>
                 <h1><a id="references">References</a></h1>

           </div>
</div>

解决方案

If you can provide full code for that page (at least header and overview container row), I'll give you the solution.

Please have a look on this concept for achieve that your target structure.

*,
 :after,
 :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.site-header {
  width: 100%;
  position: relative;
  background: orange;
  display: table;
}

.site-header .headerImage {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.site-header .headerText {
  background: rgba(213, 123, 75, 0.6);
  padding: 10% 10% 10% 40%;
  display: table-cell;
  vertical-align: middle;
  position: relative;
  z-index: 2;
}

.site-header .headerText .inner {
  background: #ccc;
  padding: 30px 50px;
}

.site-header .headerText .inner .title {
  font-size: 30px;
}

.overview-container-with-sidebar {
  width: 100%;
  position: relative;
  background: brown;
  float: left;
}

.sidebar {
  width: 30%;
  display: inline-block;
  float: left;
}

.overview-container {
  width: 70%;
  display: inline-block;
  float: left;
}

<header class="site-header">
  <img class="headerImage" src="http://via.placeholder.com/990x250">
  <div class="headerText">
    <div class="inner">
      <div class="title">Wet Lab</div>
      <div class="subtitle">We did some cool stuff and wrote this tagline</div>
    </div>
  </div>
</header>
<section class="overview-container-with-sidebar">
  <div class="sidebar">
    <ul>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
      <li>Links</li>
    </ul>
  </div>
  <div class="overview-container">
    <h2>Overview</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui
      in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui
      in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</section>

这篇关于阻止容器div覆盖Bootstrap中的绝对相对div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！