0
Ich habe diesen festen Gradient Div, dass alle meine Inhalte müssen innerhalb gehen, damit dieses Cursor Positionselement weiterarbeiten. Das Problem ist, ich möchte den Inhalt scrollen und nicht behoben werden. Wie kann ich das erreichen?Relativ ein div innerhalb eines festen div positionieren?
Hier ist, was ich habe:
<body>
<div class="wrapper">
<div class="gradient">
<div class="logo">
<img src="logo-05.svg">
</div>
<div class="statement">
This is a blockquote. Someone said something really funny and it should be noted here. Aenean massa strong . Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In em enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam link dictum felis eu pede mollis pretium. This is a blockquote. Someone said something really funny and it should be noted here. Aenean massa strong . Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In em enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam link dictum felis eu pede mollis pretium.
</div>
</div>
</div>
.gradient {
height: calc(100%);
background: -webkit-linear-gradient(270deg, #FFCC33,#FF3366);
background: -moz-linear-gradient(270deg, #FFCC33,#FF3366);
background: -o-linear-gradient(270deg, #FFCC33,#FF3366);
background: -ms-linear-gradient(270deg, #FFCC33,#FF3366);
background: linear-gradient(180deg, #FFCC33,#FF3366);
position: fixed;
width: 100%;
background-color: #292c2f;
font-family: monospace;
overflow: hidden;
font-size: 100pt;
color: white;
z-index: -99;
}
.wrapper{
width: 100%;
height:100%;
position: relative;
}
.header{
width: 100%;
position: fixed;
}
.dates{
color:black;
z-index: 99;
display: inline-block;
float: left;
padding-top: 5px;
font-size: 20pt;
margin-left: -20px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 1pt;
}
.year{
color:black;
margin-top: -10px;
z-index: 99;
display: inline-block;
top:25px;
font-size: 55pt;
margin-left: 20px;
font-family: 'Kavoon', sans-serif;
font-weight: 800;
letter-spacing:-3px;
}
.location{
right: 35px;
top: 35px;
text-align: right;
width: 100%;
position: fixed;
font-size: 20pt;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: black;
}
.logo{
margin-right: auto;
margin-left: auto;
width: 600px;
position: relative;
}
.statement{
position: relative;
font-size: 14pt;
color:black;
width:500px;
margin-right: auto;
margin-left: auto;
font-family: 'Roboto', sans-serif;
}
.footer ul {
text-align: center;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
font-weight: 800;
width:100%;
display:inline-block;
text-transform: uppercase;
}
.footer-wrap{
color:black;
width: 100%;
text-align: center;
margin-bottom: 45px;
bottom: 0;
position: fixed;
padding:10;
display: inline-block;
}