Question

我正在使用bootstrap创建一个RWD页面，我已经制作了两个不同的容器来显示内容，我在左侧创建了垂直导航，我必须在下面一个接一个地显示容器，但是当我添加另一个容器时，第一和第二容器都重叠。我无法确定为什么两个容器都重叠。

@font-face {
  font-family: "PlayfairDisplay-Bold", serif;
  src: url('fonts/PlayfairDisplay-Bold.ttf') format('truetype');
}

@font-face {
  font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
  src: url('fonts/HelveticaNeue.ttf') format('truetype');
}

#page {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

header {
  height: 430px;
  position: relative;
}

header a.logo {
  z-index: 1;
  position: absolute;
  display: block;
  width: 160px;
  height: 66px;
  /*    background: url(../images/logo.svg) no-repeat 0 0;*/
  background-size: contain;
  top: 15px;
  left: 20px;
}

header a.logo span {
  display: none;
}

header div.hero {
  position: relative;
  width: 100%;
  top: 0;
  left: 3px;
  letter-spacing: 6px;
  text-transform: uppercase;
  /*    margin-top: 30%;*/
  padding: 50px 20px 20px 50px;
}

header div.hero h1 {
  font-size: 2em;
  line-height: 2em;
  margin: 0;
  color: #8A2BE2;
  font-weight: 600;
}

body {
  font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  background-color: #fff;
  overflow-x: hidden;
}


/* Navbar styles */

.main-menu {
  width: 25%;
  height: 100%;
  background: #fff;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1105;
  overflow: hidden;
  border-right: 2px solid;
}

.main-menu .close-menu {
  width: 18px;
  height: 18px;
  margin: 35px 25px 0 0;
  float: right;
  cursor: pointer;
  background-size: contain;
}

.menu-item-list {
  display: block;
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}

.menu-item-list ul {
  padding: 0;
  margin: 0;
  width: 100%;
  position: relative;
  background-color: #f1f1f1;
}

.menu-item-list ul li {
  list-style: none;
  margin: 0 0;
  padding: 0 0 0 10px;
  border-top: 1px solid #262626;
  border-bottom: 1px solid #262626;
}

.menu-item-list ul li a {
  margin: 0;
  padding: 8px 16px;
  color: #373737;
  font-weight: 300;
  font-size: 19px;
  display: block;
  line-height: 60px;
  text-align: right;
  text-decoration: none;
}

.menu-item-list ul li a:hover,
.menu-item-list ul li.active a {
  color: #8A2BE2;
  border-right: 2px solid #8A2BE2;
}

.head {
  position: absolute;
  left: 32%;
  top: 20%;
}

.row.head h1 {
  font-family: 'PlayfairDisplay-Bold', serif;
  font-size: 54px;
  font-weight: 500;
  background-color: #fff;
  color: #8A2BE2;
  overflow-x: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Investcube</title>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" media="screen">
  <link rel="stylesheet" type="text/css" href="./css/main.css">
</head>

<body>

  <div id="page">
    <header>
      <nav class="main-menu" id="main-menu-section">
        <div class="hero">
          <h1>investcube</h1>
          <a class="logo" href="#" title="investcube"><span>investcube</span> </a>
        </div>
        <div class="menu-item-list">
          <ul>
            <li class=""><a href="#">Home</a></li>
            <li class=""><a href="#">Team</a></li>
            <li class=""><a href="#">About</a></li>
            <li class=""><a href="#">Portfolio</a></li>
            <li class=""><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>

    <section style="position: relative;">
      <div class="container">
        <div class="row head">
          <h1>Meet the team</h1>

          <div class="col-sm-6" style="border-style: solid;width: 300px;height: 450px;">
          </div>

          <div class="col-sm-6">

            <h3>iain shovlin</h3>
            <h4>chairman & founding partner</h4>

            <div class="row">
              <div class="col-sm-6 other">
                <h4>Chicago, USA</h4>
              </div>
              <div class="col-sm-6 other2">

                <a href="#" target="_blank" title=" LinkedIn">

                </a>

              </div>
            </div>

            <p> Finance is critical. If sufficient investment is made in infrastructure and venture capital is made available, there will be a big improvement in thesituation.
            </p>

            <p> Before forming Guild Capital in 2009, Iain was a venture capitalist with Technology Crossover Ventures in Palo Alto, California for six years. At TCV he undertook investments spanning consumer internet,business process outsourcing, and software.
              Prior to venture capital, Iain was a management consultant with Bain & Company
            </p>

            <p>Iain was born in Glasgow, Scotland and has an M.A. in International Business from the University of Edinburgh, Scotland.</p>



          </div>
        </div>
    </section>


    <section style="text-align: center;
        position: relative;    margin-top: 20px;
        margin-bottom: 30px;
        padding: 0;">

      <div class="container">
        <div class="row ">
          <div class="col-sm-6" style="">
            <ul style="list-style: none;">Prior Investments
              <li>AdKnowledge</li>
              <li>Claria</li>
              <li>Dermstore</li>
              <li>Dealon</li>
              <li>EXL Service (NASDAQ: EXLS)</li>
              <li>Hautelook (Acquired by Nordstrom)</li>
              <li>Integres</li>
              <li>Leadscon (Acquired by Access Intelligence)</li>
              <li>NexTag</li>
              <li>Security Source</li>
              <li>Sensa</li>
              <li>Total Attorneys </li>
            </ul>
          </div>

          <div class="col-sm-6">
            <ul style="list-style: none;">Active Investments
              <li>Argyle Search Partners*</li>
              <li>Candy Club</li>
              <li>Club W</li>
              <li>Fabletics</li>
              <li>Gaming Insiders</li>
              <li>Gohealth</li>
              <li>Home Chef</li>
              <li>JustFab</li>
              <li>Atidiv</li>
              <li>MailControl</li>
              <li>Mystery Tackle Box</li>
              <li>Techweek*</li>
            </ul>

          </div>
        </div>
      </div>
    </section>
    </div>
    <script type="text/javascript" src="./js/jquery-min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</body>

</html>

Answer 1

即使您的第一部分位于相对位置，您也可以通过绝对定位将第一部分的内容从页面流中删除。更改.head div的位置：

.head {
    position: absolute;
    left: 32%;
    top: 20%;
}

到

.head {
    position: relative;
    left: 32%;
    top: 20%;
}

并根据您的设计结构调整布局属性。

引导容器一个接一个地重叠

1 个答案: