html - 使用 CSS 创建隐藏的背景 div

Question

我按照关于创建 grid of responsive squares 的优秀帖子创建了一个响应式正方形网格。

我需要做的是创建两个背景 div，跨度为高度的一半和整个宽度，以便我可以将事件附加到它们。但是，这些 div 不会干扰单元格中的内容。

这是正方形在 html 中的样子:

<div class="row-content">
    <div class="content">
        <div class="table">
            <div class="table-cell numbers">
                <span>100.08</span>
            </div>
        </div>
    </div>
</div>

和CSS

.row-content {
    float:left;
    position: relative;
    width: 8%; /* 1 divide number of columns */
    padding-bottom : 8%; /* = width for a 1:1 aspect ratio */
    margin:0.16667%; /* = (100% - (% width * columns)) / (columns * 2) */
    background-color:#1E1E1E;
    overflow:hidden;
}

.content {
    position:absolute;
    height:98%; /* = 100% - 2*10% padding */
    width:98%; /* = 100% - 2*5% padding */
    padding: 1%;
}

.table{
    display:table;
    width:100%;
    height:100%;
}

.table-cell{
    display:table-cell;
    vertical-align:middle;
}

.numbers{
    font-weight:900;
    font-size:12px;
    color:#fff;
}

结果如下:

这是 fiddle 。

我想要在内容后面有两个“隐藏”的 div。隐藏我的意思是没有内容的div，那里只是为了附加事件。像这样:

我正在使用 Bootstrap 3 和 jQuery。

Answer 1

将 position: relative; 添加到您的 css 中的 .numbers 类。
创建 2 个 div，并将它们添加为绝对。

如果你想在内容后面显示 div，那么添加这个，就像我添加的那样。如果你想通过 div 关闭内容，或者删除。

/* Shows content above divs */
.numbers > span {
  position: relative;
  z-index: 1;
}

这是我的代码:

#d1, #d2 {
  width: 100%;
  height: 50%;
  left: 0;
  position: absolute;
}

#d1 {  
  top: 0;
  background-color: rgba(51,107,230,.5);
}

#d2 {
  bottom: 0;
  background-color: rgba(255,221,0,.5);
}

/* Shows content above divs */
.numbers > span {
  position: relative;
  z-index: 1;
}

.row-content {
  float:left;
  position: relative;
  width: 8%; /* 1 divide number of columns */
  padding-bottom : 8%; /* = width for a 1:1 aspect ratio */
  margin:0.16667%; /* = (100% - (% width * columns)) / (columns * 2) */
  background-color:#1E1E1E;
  overflow:hidden;
}

.content {
  position:absolute;
  height:98%; /* = 100% - 2*10% padding */
  width:98%; /* = 100% - 2*5% padding */
  padding: 1%;

}

.table{
  display:table;
  width:100%;
  height:100%;
}

.table-cell{
  display:table-cell;
  vertical-align:middle;
}

.numbers{
  font-weight:900;
  font-size:16px;
  color:#fff;
  position: relative;
}

<div class="row-content">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        <span>100.08</span>
        <div id="d1"></div>
        <div id="d2"></div>
      </div>
    </div>
  </div>
</div>