Within my layout, there is a fixed div called #navigation that houses buttons. Alongside this, there is scrollable content in the form of .card elements.
The #navigation div currently displays with a green background for demonstration purposes, as shown below:
#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>To ensure that any part of a .card element hidden as it goes behind the green background of the #navigation div, I utilize z-index stacking order. The solution works effectively, demonstrated here:
#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>However, in a production environment, I aim to remove the green background from the #navigation div, leaving only the buttons visible. This leads to the question: how can I prevent top-side overflow from the #card-wrapper once it meets the hypothetical green background?
#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>I welcome any suggestions, whether CSS/JS/jQuery-based, that avoid hardcoded values.