使一个div跨越两个相邻的div？

TheLearner 发表于 Dev

学习者

我正在尝试编写一个按钮，该按钮将垂直跨越两个div，一个在另一个之上。此按钮为圆形div的形式，内部带有向下的V形字符（使用Font Awesome）。单击此按钮可将页面向下滚动到同一页面内的预定点。此功能在许多现代单页设计中非常常见。这是我的尝试：

.aboutjumbo {
  background-color: #ffcc00;
}
.aboutjumbo p {
  font-size: 2em;
}
.downarrow {
  background-color: #ff0000;
  border-radius: 50% !important;
  z-index: 1000;
  width: 4em;
  height: 4em;
  margin-bottom: -5.5em;
}
.downarrow i {
  margin-top: 0.5em;
  font-size: 200%;
}
.test {
  height: 12em;
  background-color: #a5a5a5;
  z-index: -20;
  margin-top: -2em;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body>
  <!-- about.html -->
  <div class="jumbotron text-center top-jumbotron aboutjumbo">
    <div class="container">
      <h1>About Us</h1>
      <p>Know all about one of the most vibrant rendezvous for Spanish self-learners around the world.</p>
      <div class="downarrow text-center"><i class="fa fa-chevron-down"></i>
      </div>
    </div>
  </div>


  <div class="test">
    <p>blah blah blah blah</p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

如您所见，跨越两个div时，滚动按钮（红色div圆形）无法达到预期的效果。相反，尽管分配了z-index值，但下半部分被第二个div占用了。另外，我无法将按钮水平居中。有人可以帮我解决吗？

乔什·克罗齐耶（Josh Crozier）

它不起作用，因为该z-index属性仅适用于定位的元素。

因此，您只需要添加position: relative到.downarrow元素。

当然，position: absolute/position: fixed也会定位元素，但是相对定位会将元素保留在文档流中，这很可能是您想要的。

.downarrow {
    /* ... */
    z-index: 1000;
    position: relative;
    width: 4em;
    height: 4em;
    margin-bottom: -5.5em;
}

更新的示例：

.aboutjumbo {
  background-color: #ffcc00;
}
.aboutjumbo p {
  font-size: 2em;
}
.downarrow {
  background-color: #ff0000;
  border-radius: 50% !important;
  z-index: 1000;
  position: relative;
  width: 4em;
  height: 4em;
  margin-bottom: -5.5em;
}
.downarrow i {
  margin-top: 0.5em;
  font-size: 200%;
}
.test {
  height: 12em;
  background-color: #a5a5a5;
  z-index: -20;
  margin-top: -2em;
}

.jumbotron {
  position: relative;
}
.downarrow {  
  position: absolute;
  bottom: -2em;
  left: 0; right:0;
  margin: auto;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body>
  <!-- about.html -->
  <div class="jumbotron text-center top-jumbotron aboutjumbo">
    <div class="container">
      <h1>About Us</h1>
      <p>Know all about one of the most vibrant rendezvous for Spanish self-learners around the world.</p>
      <div class="downarrow text-center"><i class="fa fa-chevron-down"></i>
      </div>
    </div>
  </div>


  <div class="test">
    <p>blah blah blah blah</p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>