Tabula_Rasa
Mitglied
Hallo zusammen,
der Div mit dem Text "Sehr viel Text" in der section soll hinter dem div mit der Klasse .button-container verschwinden beim runterscrollen. Ich habe versucht dem .button-container eine background color und höhe zu geben aber das hat nicht funktioniert. Die Text ist hinter den buttons noch sichtbar. Kann mir jemand aushelfen?
der Div mit dem Text "Sehr viel Text" in der section soll hinter dem div mit der Klasse .button-container verschwinden beim runterscrollen. Ich habe versucht dem .button-container eine background color und höhe zu geben aber das hat nicht funktioniert. Die Text ist hinter den buttons noch sichtbar. Kann mir jemand aushelfen?
HTML:
<html>
<head>
<title>Test</title>
<style>
body {
margin: 0;
padding: 0;
}
.header{
display: flex;
align-items: center;
padding-left: 1rem;
height: 50px;
width: 100%;
position: fixed;
z-index: 22;
background: #ECF0F1;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
font-size: 1.1rem;
}
section{
height: 1500px;
padding-top: 70px;
margin-left: 200px;
padding-bottom: 20px;
max-width: calc(100% - 220px);
}
aside{
left: 0;
margin-top: 50px;
height: calc(100% - 50px);
width: 180px;
background: #ECF0F1;
-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.40);
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
position: fixed;
overflow-y: auto;
z-index: 10;
}
.button-container {
display: flex;
justify-content: center;
width: 100%;
background-color: white;
z-index: 1000;
}
.buttons {
position: fixed;
}
.button {
display: inline-block;
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="header">
....
</div>
<aside>
...
</aside>
<section>
<div class="button-container">
<div class="buttons">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
</div>
<div style="margin-top: 75px;"></div>
Sehr viel Text.
</div>
</section>
</body>
</html>