边框后面的可点击区域？

Question

我有两个 div：<div class="top"></div> 和 <div class="bottom"></div>，它们分别填满了页面的上半部分和下半部分。

我想在这两个 div 之间留出 50 像素的间隙，以便它们后面的元素 (<div class="clickable"></div>) 可以在该间隙内点击。

在下面的示例中，我有点假装它，以便您了解我要进行的设计，可点击区域显然不可点击（由于其正上方存在边框）

您对如何实现这一点有什么想法吗？查看我的 JSFIDDLE 看看我在说什么

我使用的渐变是 top 和 bottom 的必要背景，以及它们之间 50px 间隙的 50% 高度。我不是在为 top 和 bottom.

寻找特定高度的解决方案

HTML :

<div class="container">
    <div class="clickable"></div>
    <div class="top">
        <div></div>
    </div>
    <div class="bottom">
        <div></div>
    </div>
</div>

CSS :

* {
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

html, body {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0;
}
.container {
    position: relative;
    float: left;
    width: 100%;
    height: 150px;  
}
.clickable {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: red;
    cursor: pointer;
}
.top,.bottom {
    position: relative;
    float: left;
    width: 100%;
    height: 50%;
}
.top div,.bottom div {
    float: left;
    width: 100%;
    height: 100%;
}
.top {
    border-bottom: 25px solid transparent;
}
.bottom {
    border-top: 25px solid transparent;
}

.top div {
    background: -moz-linear-gradient(top,  rgba(147,189,69,1) 0%, rgba(125,185,232,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,189,69,1)), color-stop(100%,rgba(125,185,232,0)));
    background: -webkit-linear-gradient(top,  rgba(147,189,69,1) 0%,rgba(125,185,232,0) 100%);
    background: -o-linear-gradient(top,  rgba(147,189,69,1) 0%,rgba(125,185,232,0) 100%);
    background: -ms-linear-gradient(top,  rgba(147,189,69,1) 0%,rgba(125,185,232,0) 100%);
    background: linear-gradient(to bottom,  rgba(147,189,69,1) 0%,rgba(125,185,232,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93bd45', endColorstr='#007db9e8',GradientType=0 );
}
.bottom div {
    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(147,189,69,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(147,189,69,1)));
    background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(147,189,69,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(147,189,69,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(147,189,69,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(147,189,69,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#93bd45',GradientType=0 );
}

Answer 1

你可以用 calc 和 margin 来创建间隙（这就是它的用途）......除非你想要它们，否则不需要浮动。

Calc 支持 IE9 及更高版本：CanIUse.com

* {
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}
html,
body {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
}
.container {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.clickable {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: red;
  cursor: pointer;
}
.top,
.bottom {
  position: relative;
  height: calc(50% - 25px);
}
.top {
  margin-bottom: 50px;
}
.top div,
.bottom div {
  height: 100%;
}
.top div {
  background: lightblue;
}
.bottom div {
  background: lightgreen
}

<div class="container">
  <div class="clickable"></div>
  <div class="top">
    <div></div>
  </div>
  <div class="bottom">
    <div></div>
  </div>
</div>

边框后面的可点击区域？

Clickable area behind border?

html

css

z-index