違う親を持つ同じ要素の指定の仕方が分かりません。

まず初めに、参考となるサイトがあったのでURLを載せておきます。
https://sutara79.github.io/demo-compare-onepagescroll/demo/jquery.scrollablelink/

次に問題があるHTMLコードを載せます。

HTML
1<body>
2   <div class="wrapper">
3      <header>
4         <div class="header-inner">
5            <div class="title">
6               <h1>Hello</h1>
7            </div>
8            <div class="next-btn-wrap" id="next_profile">
9               <span class="next-btn"></span>
10            </div>
11         </div>
12      </header>
13      <main>
14         <div class="main-inner">
15            <section class="profile">
16               <div class="profile-title">profile</div>
17               <div class="content">
18                  <!--ここに内容を書く-->
19               </div>
20               <div class="next-btn-wrap" id="next_works">
21                  <span class="next-btn"></span>
22               </div>
23            </section>
24            <section class="works">
25               <div class="works-title">works</div>
26               <div class="content">
27               <!--ここに内容を書く-->
28               </div>
29               <div class="next-btn-wrap" id="next_contact">
30                  <span class="next-btn"></span>
31               </div>
32            </section>
33         </div>
34      </main>
35   </div>
36</body>
37コード

SCSS
1.next-btn-wrap {
2      position: absolute;
3      width: 4rem;
4      height: 4rem;
5      bottom: 5rem;
6      display: flex;
7      justify-content: center;
8      align-items: center;
9
10      &:hover {
11         opacity: .5;
12      }
13   }
14
15   .next-btn {
16      position: relative;
17
18      &::before {
19         position: absolute;
20         bottom: 0;
21         right: -.6rem;
22         content: '';
23         display: inline-block;
24         width: 3rem;
25         height: .5rem;
26         background: #000;
27         -webkit-transform: rotate(45deg);
28         transform: rotate(45deg);
29      }
30
31      &::after {
32         position: absolute;
33         bottom: 0;
34         left: -.6rem;
35         content: '';
36         display: inline-block;
37         width: 3rem;
38         height: .5rem;
39         background: #000;
40         -webkit-transform: rotate(-45deg);
41         transform: rotate(-45deg);
42      }
43   }
44コード

ざっと書きましたが、要するにheader内や、各section内ごとに

<div class="next-btn-wrap" id="next_profile">
   <span class="next-btn"></span>
</div>
コード

この要素を使いたいという事です。
しかし、上記のコードを書くとheader内の最初に指定した場所に重なって表示されてしまいます。

以上の事で分かる方おられましたらご回答宜しくお願いします。

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

回答2件

ベストアンサー

.next-btn-wrapにposition:absoluteが指定されていますが、
その親要素（ボタンを配置したい各ブロック）にpositon:relativeの指定がないので
全てbodyを基準に配置されて同じ場所に重なってしまっているものと思われます。

position:absoluteが指定された要素は、自身からたどって最初に出てきたposition:static以外が指定された先祖要素を基準として絶対配置しますので、
どの領域を基準として座標指定したいのかよく考えて、
基準となる領域の要素にposition:relativeを入れておきましょう。

投稿2019/09/19 18:40

aKusano

総合スコア3763

退会済みユーザー

2019/09/19 19:05

回答ありがとうございます。ご指摘の通り、各sectionの親要素にposition:relativeを指定したら思い通りの配置になりました。ありがとうございます！このことに関して質問なのですが、子要素がposition:absoluteの時、親要素にposition:relativeを指定したら良いという事は分かったのですが、親要素の中にposition:absoluteの子要素が1つ以上ある場合、親要素に近い子要素がその対象になるのでしょうか？分かりづらい質問で申し訳ないのですが、宜しければご回答いただけるとありがたいです。

aKusano

2019/09/20 02:06

div0.relative 　├div1.absolute 　├div2.absolute 　└div3.absolute 　　　└div4.abosolute 仮にこのような構造だった場合、div1〜3は全てdiv0を基準として絶対配置されますが、 div4はdiv3を基準として絶対配置されます。絶対配置の基準となるボックスのことを「包含ブロック」と言いますが、包含ブロックとなるための条件は「positionの値がstatic以外の要素」なので、必ずしもrelativeであるとは限らないからです。

退会済みユーザー

2019/09/20 08:01

ありがとうございます! 大変勉強になりました。

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

CSSと書いてますが、文法的にSCSSではないですか？
SCSSは、コンパイラを使用してCSSに変換しないと使えませんよ。
「SCSS　コンパイラ」で検索してください。

投稿2019/09/19 15:40

H40831

総合スコア975

退会済みユーザー

2019/09/19 15:45

失礼しました。エディタではSCSSを使用しています。訂正しておきます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

違う親を持つ同じ要素の指定の仕方が分かりません。

関連した質問