0
私は、このカーソル位置要素が機能し続けるためには、すべてのコンテンツが内部に入っていなければならない固定勾配divを持っています。問題は、コンテンツをスクロールして修正しないことです。どうすればこれを達成できますか？ここで固定div内のdivを相対的に配置しますか？
は私が持っているものです。
<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;
}