Question

我的布局包含一个带有按钮的fixed div（#navigation）。布局还包括可滚动内容（.card）。

#navigation目前有绿色背景用于演示目的。像这样：

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: green;
  padding: 25px;
}

<div id="navigation"><button id="btn1">Button</button>
  <button id="btn2">Button</button>
  <button id="btn3">Button</button>
  <button id="btn4">Button</button>
</div>

我想隐藏任何.card元素的任何部分，只要它在绿色背景后面。所以，我使用z-index堆叠顺序，它运作良好。像这样：

#card-wrapper {
  width: 250px;
  margin: 100px auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  display: inline-block
}

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
  background: green;
  padding: 25px;
}

#main {
  text-align: center;
}

<div id="main">

  <div id="navigation"><button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>

  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

但是，我也不想在生产中使用绿色背景。这意味着#navigation不应该有背景，只有里面的按钮可见。

所以我的问题是，一旦到达假设的绿色背景，我如何隐藏#card-wrapper的顶部溢出？

#card-wrapper {
  width: 250px;
  margin: 100px auto;
}

.card {
  height: 200px;
  width: 200px;
  background: #131418;
  margin: 1em auto;
  display: inline-block
}

#navigation {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 1;
  padding: 25px;
  border: 1px solid;
  background: transparent
}

#main {
  text-align: center;
}

body {
  margin: 0 auto;
  background: linear-gradient(to left, #c33764, #1d2671);
}

<div id="main">

  <div id="navigation"><button id="btn1">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
  </div>

  <div id="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

</div>

我对所有解决方案CSS / JS / jQuery持开放态度，只要它们不涉及硬编码值

Answer 1

function onInstall(e) { onOpen(e) } function onOpen(e) { var html = HtmlService.createHtmlOutputFromFile('Index') .setSandboxMode(HtmlService.SandboxMode.IFRAME) .setTitle('BB KING'); SpreadsheetApp.getUi().showSidebar(html); }设置为background时，您无法执行纯 CSS 。解决方法是将其设置为与transparent 元素相同的background，并将其body设置为width以匹配{ {1}} 元素的{1}} ：

100%

width

隐藏带有透明背景的堆叠div后面的溢出

1 个答案: