Webデザイン　パララックスについて

パララックスについてお聞きしたいです。
現在パララックスを用いたWebページを作成しています。

<html>

<head>

    <meta charset="UTF-8">
    <title>SHIORIのポートフォリオ</title>
    <link href="css/style.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="http://css3-mediaqueriesjs.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>





</head>

<body>
   
   
   
<!--
    <h1>javascript</h1>
    <p class="text">ウェブに動きを加えよう</p>
    <P class="hoge">画像をフェードインさせる</P>
    <img alt="webdesing" src="img/hituzi.jpg">
    <script src="main.js"></script>
-->
<header>

<div class="parallaxx">新江の島水族館</div>

<div class="parallaxx">新江の島水族館って？</div>
<div class="parallaxx">江の水のペンギン</div>
<div class="parallaxx">江の水のクラゲ</div>



    </header>
    
<div class="parallax"><h2>海の仲間たち</h2></div>

<div class="parallax"><h3>新江の島水族館って？</h3></div>



<!--スクロールするボックス-->
<div class="contents">
 
  <div id="ani1">たくさんの海の仲間たち</div>
  <div class="s2">それはまるで江の島の海の中</div>
   <div class="s3">２万匹の魚が泳ぐ海の底</div>
</div>


<div class="contents1">
  <div id="ani2">生き物が作り出す神秘的な空間</div>
    
    <div class="s2">光と生き物の融合</div>
    
    <div class="s3">必ずあなたもこの世界に引き込まれます</div>
</div>


   
       <div class="parallaxp"><h2>この文字が最上部にうつってしまう</h2></div>

    



<div class="contents1">

    </div>

<script src="main.js"></script>
</body>

</html>ここに言語を入力
コード

body,
html {
    height: 100%;
    margin: 0 auto;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体";
    letter-spacing: 2px;
}

header {
    
}

/*ここまでパララックスとは関係のない設定*/

/*固定された画像*/





.parallax {
    position: relative;
    background-image: url(../img/haikei.jpg);
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.parallaxp {
    position: relative;
    background-image: url(../img/haikei.jpg);
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.parallaxp h2 {
color: #fff;
    font-size: 80px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 20%;
}

/*タイトル*/

.parallax h2 {
    color: #fff;
    font-size: 80px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 20%;
}

.parallax h3 {
    color: #fff;
    font-size: 40px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 50%;
}

.parallax h4 {
    color: #fff;
    font-size: 40px;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 50%;
}
/*スクロールするボックス*/

.contents {
    position: relative;
    z-index: 1;
    height: 500px;
    font-size: 60px;
    background-image:
    url(../img/fishi1.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 170px 20px;
    text-align: center;
    

}

.s1{
    font-size: 60px;
    color: #fff;
    text-shadow: 0 0 5rem #fff, 0 0 12ch #fff, 0 0 9ch #fff, 0 0 9rem ;

}

#ani1{
    font-size: 60px;
    color: #fff;
    text-shadow: 0 0 5rem #fff, 0 0 12ch #fff, 0 0 9ch #fff, 0 0 9rem ;
 transition: .8s;
}

#ani2{
    font-size: 60px;
    color: #fff;
    text-shadow: 0 0 5rem #fff, 0 0 12ch #fff, 0 0 9ch #fff, 0 0 9rem ;
 transition: .8s;
}

.s2{
    margin-top: 10%;
    font-size: 40px;
    color: #fff;
}
.s3{
    margin-top: 2%;
    font-size: 40px;
    color: #fff;
}



.contents1 {
    position: relative;
    z-index: 1;
    height:500px;
    background-image:
    url(../img/enoshimakurage.png);
    
    font-size:60px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 190px 20px;
    text-align :center;

}

.parallaxx {
    position: relative;
    background-image:
    url(../img/haikei.jpg);
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.s4{
    
    font-size: 50px;
    color: #fff;
    text-shadow: 0 0 5rem #fff, 0 0 12ch #fff, 0 0 9ch #fff, 0 0 9rem ;
    text-align: center;
    padding-top: 6%;
    text-shadow: 0 0 5rem #fff, 0 0 12ch #fff, 0 0 9ch #fff, 0 0 9rem ;
}

コード

”ここの文字が最上部にうつってしまう”を最上部にうつさなくしたいでうつさなくしたいです。
どなたか解決できる方がいましたらお力を貸してください。よろしくよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

質問からはどのようなコンテンツを想定しているのか、わかりにくいですが、
h2がparalaxpクラス内に内包するという意図でよいのであれば、

CSS
1.parallaxp h2 {
2    color: #fff;
3    font-size: 80px;
4    text-align: center;
5    position: absolute;
6    width: 100%;
7    top: 20%;
8}
9

これでいかがでしょうか。

投稿2018/07/09 00:46

macaron_xxx

総合スコア3191

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Webデザイン　パララックスについて

関連した質問