position fixed 親要素

Question

画像のように投稿者katouをposition fixedで、スクロールしても緑色のボックス(親要素)の右下に固定したいのですが
適用すると

緑色のボックスからはみ出してしまいます

緑色のボックスの中だけでposition fixedを適用する方法を教えていただけないでしょうか

content_postがボックス、span.nameが投稿者名です

  div.content_post {
    @include boxBase(20px 0 ,30px);
    position: relative;
    background-color: #CCFF99;
    height: 350px;
    color: #000000;
    background-size: cover;
    background-position: center center;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba($black,0.2);
    overflow: auto;


    span.name {
      position: absolute;
      right: 30px;
      bottom: 30px;
      z-index: 2;
      font-size: 13px;
      a {
        display: block;
        color: #aaa;
        &:hover {
          text-decoration: underline;
          color: #aaa;
        }
      }

Answer 1

position fixedは画面に固定されるため、提示の要件であれば position absolute です。
heightを指定する要素の外側を作り、そこにabsolute を適用する要素を入れればよいです。

【CSSのpositionを総まとめ！absoluteやfixedの使い方は？】
https://saruwakakun.com/html-css/basic/relative-absolute-fixed

Comments

[yakumo02]

回答ありがとうございます
すみません、＞　heightを指定する要素の外側を作り、そこにabsolute を適用する要素を入れればよいです。
の意味がよく分からないのですが

[x_x]

To katou02 さん
スクロールする領域内に span.name があると固定するのが難しくなるため、もう一階層増やしたほうがいいということだと思います。

Answer 2

position fixedではスクロールしても同じ位置に固定になるので今回のようにツイートに対して当てるのであれば利用しなくてもいいかなと思います。

span.nameのposition: absolute;が画面から見ての位置になっている気がするので
HTMLの記述でspan.nameがcontent_postの子要素になっているかを確認してみるといいかもしれません！

Comments

[yakumo02]

回答ありがとうございます
子要素にはなっていたのですが動いてしまいます

[TakuF]

ページを上下にスクロールしたときにcontent_postについてきますか？
ついてこなければ親子関係がきちんとできていないと考えられます。

もしもついてくるようであれば原因は不明ですがtop と leftで一度指定してみるというのはいかがでしょうか？