スクロールすると文字が一緒についてくる

文字を固定したいです。

スクロールすると文字も動いてしまいます。

<aside id="mainimg"> <div class="koteimoji"> ★<p>次の世代のために　　　 <br> ★<br>  チャレンジする</p></div> <img src="images/main1.jpg" alt="" id="slide1" height="500px" > <div class="rect"> <p class="TextTyping">楽しいに</p> </div> <img src="images/main2.jpg" alt="" id="slide2"height="500px" > <img src="images/main3.jpg" alt="" id="slide3" height="500px"> ★<a href="#message" class="arrow1" class="hover3">MESSAGE</a> </aside>

★スクロールすると３行ともいっしょに動いてしまいます。

/画像ブロック/
#mainimg {
clear: left;
width: 100%;
margin-bottom: 20px;
position: relative;
}

/========= message===============/
a.arrow1{
text-decoration:none;
color:#fff;
padding-right:40px;
top:520px;
left:150px;
display: block;
position: fixed;
}
a.arrow1:before,
a.arrow1:after{
content:"";
display:block;
position:absolute;
}
a.arrow1:before{
border-right:1px solid #fff;
border-top:1px solid #fff;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
width:8px;height:8px;
right:0;top:50%;
margin-top:-4px;
}
a.arrow1:after{
width:25px;
border-bottom:1px solid #fff;
right:0;top:50%;
}

/========= 次の世代のために
〇〇〇　　チャレンジする===============/
.koteimoji {/親div/
position: relative;/相対配置/
}

.koteimoji p {
display: block;
position: fixed;
top: 300px;
left: 50px;
margin:0;
padding:0;
color: white;/文字は白に/
font-weight: bold; /太字に/
font-size: 4em;/サイズ2倍/
z-index: 10;
}

/========= 四角===============/
.rect {
display: block;
position: fixed;
top:320px;
left: 40px;
padding: 10px 100PX;
margin: 30px;
font-weight: bold;
border: solid 3px #fff;
}

Lhankor_Mhy

2021/06/02 04:00

「文字」とは具体的にはどれのことですか？ a.arrow1 ですか？

m.ts10806

2021/06/02 04:16

画像で提示されても再現確認できません。 htmlも必要です

BeatStar

2021/06/02 10:37

画像での質問はやめた方がいいです。再現率が低くなります。たとえば『半角スペースにすべきところを全角スペースにしてしまっていることが原因』とかの場合、『反転しないとわからない』ので、画像だけ出されても再現率が一気に低くなり、まともな回答が付きにくくなります。さらに、もしかしたらHTML側やブラウザ側、OS側の設定によるものだったりとかします。それを画像だけ、しかもCSSだけ提示されても回答が出来ません。また、環境(OSやWebブラウザ等)も提示しましょう。