CSSでposition:fixed;する際に、画面でなく親要素を基点にしたい。

Question

前提・実現したいこと

CSSでposition:fixed;する際に、画面でなく親要素を基点にしたい。

発生している問題・エラーメッセージ

該当のソースコードについて、
「.A」は、「.inner」の33%
「.B」は、「.inner」の66%
という幅にしたい。

該当のソースコード

該当のソースコードのサンプル
https://jsfiddle.net/byxms2e6/

該当のソースコード

<main>

  <section id="left">
    <p>100px固定</p>
  </section>

  <section id="right">
    <div class="inner">
      <div class="A">
        <p>「.inner」の33%</p>
      </div>
      <div class="B">
        <p>「.inner」の66%</p>
        <p>「.inner」の66%</p>
        <p>「.inner」の66%</p>
        <p>「.inner」の66%</p>
        <p>「.inner」の66%</p>
        <p>「.inner」の66%</p>
        <p>「.inner」の66%</p>
        <p>「.inner」の66%</p>
        <p>「.inner」の66%</p>
        <p>「.inner」の66%</p>
      </div>       
    </div>  
  </section>

</main>

<style type="text/css">
main {
  width: 100%;
}
#left {
  position: fixed;
  background: skyblue;
  height: 100vh;
  width: 100px; /* 固定100px */
}
#right {
  margin: 0 0 0 100px;
  width: 100%; /* 「main幅 － #leftの100px」という意味での100%*/
  position: relative;
}
.inner {
  margin: 0 auto;
  max-width: 500px;
}
.A {
  position: fixed;
  background: khaki;
  color: red;   
  width: 33%;  /* 「.inner」の33%にしたい */
  z-index: 1;  
}
.B {
  position: relative;
  background: palegreen;
  width: 66%;  /* 「.inner」の66%にしたい */
  margin: 0 0 0 33%;  
}
.B p {
  height: 50px;
}
</style>

試したこと

ネットで検索し、box-sizingや親要素への指定など一通り試しましたが、思うようにいきませんでした。

補足情報（FW/ツールのバージョンなど）

特にありません。

Comments

[x_x]

absoluteではいけない理由があるのでしょうか？

[maimaime]

はい。「.A」をabsoluteすると「.A」はスクロールされてしまいます。「#left」と「.A」は固定(fixed)し、「.B」だけをスクロールさせる。といいう動作を意図しております。

[x_x]

.B にスクロールバーを持たせるのが自然かと思うのですがどうでしょうか？

[maimaime]

なるほど。「.B」に「height: 100vh;」と「overflow-y: scroll;」ですか。一案ですね。参考にさせて頂きます。

[yoshinavi]

レイアウト動作の意図が今ひとつ理解出来ていないのですが、「position:fixed;」のグループとその他と分けるべきでは？レスポンシブ等は考慮するのでしょうか？

Answer 1

やりたいのはこういうことじゃないかと、解釈しているのですが、いかがでしょう？

<style type="text/css">
body{
  margin:0;
}
main {
  width: 100%; /*編集・追記依頼を受けて修正致しました。*/
}
#left {
  position: fixed;
  background: skyblue;
  height: 100vh;
  width: 100px;
}
#right {
  width: 100%;
  position: absolute;
  left:100px;
}
.A {
  position: fixed;
  background: khaki;
  color: red;
  width: 33%;

}
.B {
  position: relative;
  background: palegreen;
  width: 66%;
  left: 33%;
}
.B p {
  height: 50px;
}
</style>

Comments

[colling]

ああw違う。mainに対するか、、。不正解ですね。m(_ _)m

[maimaime]

それです！「position: relative;」にも「left: 33%;」という指定はできるんですね。その他いろいろ、大変勉強になりました。ありがとうございます！

[maimaime]

え？いえいえ、大丈夫です。そちらで正解ですよ。

[maimaime]

あぁ、たしかに、mainに対する幅にはなっていませんでしたね。すみませんせっかく。

[colling]

すいません。日本語の読解がなっていませんでした。ゴメンなさい（笑

[colling]

ちょっと、おさらいさせてー。
mainの幅 =ビューポート（可変）だとすると
.A と.Bが、それぞれ、mainの幅に対して33%、66%を期待するならば、#leftの幅はどこへ行くの？

[maimaime]

たーしかに!!ｗ質問がめっちゃくちゃでしたね。申し訳ございません。
Aは、（main幅 ー #leftの100px）✕33%
Bは、（main幅 ー #leftの100px）✕66％
でした。

[colling]

ああ。じゃぁ↑これを試してみれば？

[maimaime]

ですよね笑。
と思ってお蔭さまでかなり近づきました↓
https://jsfiddle.net/5p970kr8/1/
ただあとは、画面幅を狭めた時に、緑のBだけが狭くなってしまうのが問題です。

[colling]

おお、、。完成を待ってますw

[maimaime]

がんばりますｗ

Answer 2

幅が500pxとわかっているので計算してしまえばいいのでは？

.A {
  width: calc(500px * 0.33);
}

.B {
  width: calc(500px * 0.66);
}

Comments

[maimaime]

申し訳ございません。mainは100%のつもりでした。すみません。。

[maimaime]

というか正確に言うと、mainはmax-width指定しているので可変だとお考え頂ければと思います。

[x_x]

同じことだと思いますが。
仮にmain { max-width: 800px; }となっていたなら
.A { max-width: calc(800px * 0.33); }
とするだけでしょう。

[maimaime]

なるほど!!できました。ありがとうございます。

[maimaime]

すみません、やはりできていませんでした。
「#right」の中で「.A」と「.B」の幅がせめぎあってほしいのですが、画面幅を狭めても「.A」は縮まず「.B」が見えなくなるばかりでした。
https://jsfiddle.net/qjcvtx1p/

[x_x]

提示コードと違うし、widthのcalcもないようですが？

[maimaime]

コードの違いは今回のご回答に沿ったつもりなのでご容赦ください。
widthのcalcというと、こうでしょうか？
https://jsfiddle.net/qjcvtx1p/1/
それでもやはり「.A」の幅は変化しないのでは？
画面の幅を狭めても、「.B」が狭くなる（画面からはずれる）ばかりで、「.A」の幅が変化しないということです。

[x_x]

mainを100%に変更したのなら、そちらも100%から計算しないといけないのでは？

[maimaime]

いえ、mainの100%を消しても変わりませんし、またABのcalcを(800px * 0.33)でなく(100% * 0.33)などにしても変わらないようです。ん？100%*0.33は33%か。混乱してきました。笑

[maimaime]

まぁ元の質問について解決したのなら、幅の可変性については別質問立ててくれ、という話ですよね。失礼しました。

[x_x]

まあ、100%にしても正常に動くことは確認済みなので、あとは maimaime さんが慎重に計算するだけです。
それでも.Bをスクロールさせたほうがいいと思ってますし、そちらのほうが楽だと思います。

[maimaime]

でもそれですとスクロールバーが画面の端でなくBの端に出てしまってイマイチな印象です。

[maimaime]

>まあ、100%にしても正常に動くことは確認済み
え"っ、正しいコードがお分かりであれば、もう教えて下さっても良いのでは…？汗
ダメでしょうか。

Answer 3

https://developer.mozilla.org/ja/docs/Web/CSS/position

こちらのfixedの項目を確認すると理解できるかもしれません。
基本的には祖先要素の状態にかかわらずビューポート（ブラウザのwindow）が基準になりますが、
祖先要素に祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外の場合、その要素が基準になります。

動くコード

Comments

[maimaime]

こんにちは。ありがとうございます。
頂戴した「動くコード」ですと、「.A」が「.B」と一緒にスクロールしてしまうようです。

Answer 4

こんちは。
.Aが、z-index:1;となっているので、.Bもz-index:1;にしてみてください。

Comments

[maimaime]

こんにちは。お世話になります。
「.A」のz-index指定は重なっていることを見やすくしているだけです。
なので「.B」にそれを指定しても「.A」の幅が変化するわけではないと思います。

[colling]

こんにちは、#leftと#rightが重なっている状態で、#rightがwidth:100%、.Aが33%、.Bが66% もなんかおかしい気がします。.Aは左端に寄せるのが求めている動作でしょうか？

[maimaime]

ありがとうございます。

>#leftと#rightが重なっている状態
「＃right」の位置は「margin: 0 0 0 100px;」で「#left」を避けているつもりなので、「重なっている」と仰る意味がよくわかりません。

>#rightがwidth:100%、.Aが33%、.Bが66% もなんかおかしい
『「#right」の「width:100%」』は、『「#left」を避けて余った画面の幅全て』というつもりで書きました。

>.Aは左端に寄せるのが求めている動作でしょうか？
『左側』というのが『「#left」のさらに右』という意味でしたらそうです。

[colling]

なるほど、当初のコードで#right幅400pxでmargin-left:100pxではと思ったのですけど違うのですね。
#main可変＃rightも可変ってことですね