Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

正如你所看到的，我无法达到横跨两个div的滚动按钮（圆形红色div）所需的效果。相反，尽管指定了z-index值，但下半部分被第二个div吃掉了。此外，我无法水平居中按钮。有人可以帮我解决一下吗？

Answer 1

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

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

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

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

更新示例：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

让div跨骑两个相邻的div？

1 个答案: