star back image
people4
電飾 電飾
moon
men
  • HOME
  • BLOG
  • 【CSS】position:stikyが動かないとき

【CSS】position:stikyが動かないとき

BLOG WEBログ
読了約:9分

1年に2回くらいの頻度でcssのstikyが動かないと怒りが有頂天に達する時があります。

why! 動かないのなぜ？

その答えは以下でしょう、おそらく。多分。

stickyを指定した要素の親、もっと上の先祖要素にoverflow: hidden ;の指定があると効かない。

何度も忘れますのでメモとなります。
「サイガモの覚えられないcss」として認定されました。

おめでとうございます。

こんな簡単なことを。。

加齢によるポンコツ化ですかね。

【調査】原因の見える化と改善化

「なぜなぜ会議」を開きます。みんな集まってください。

どうしてそんな状況になぜ？なぜなんですか？
よく思い出してください。

あなたが悪いと言っているのではありません。

原因の見える化と改善化の為の「なぜなぜ会議」です。

あ、はい。思い起こすとテンパっている時だったと思います。
すみません。

  • 急いでるのにbodyからはみ出る要素があるのでoverflow: hiddenで隠した。
  • 急いでるのにcontainer要素からはみ出るのでoverflow: hiddenで隠した。

動かない原因はそれでした。

前に調べて原因は知ってたんですが忘れていました。
すみません。

どうしたらいいんでしょう。

向いてないんじゃないですか、この仕事。

アフェ · (;;;°;ω°;): ｽﾐﾏｾﾝ

【共有】stikyのサンプルページ

動かないときはoverflow: hiddenがあるかもです！調べてください。

スティッキー（サンプルページ）
https://astrowave.jp/amnesia_record/stiky.php

要件は以下です。

  • 3カラムの両端要素にstikyを仕込む
  • 1カラム目は上にstikyさせる
  • 3カラム目は下にstikyさせる
  • スマホの時はstikyさせない
stickyさせいたい部分のイメージ

HTML

<section class="main">
  <div class="contents">
  top contents
  </div>
  <div class="container">
    <div class="column">
      <div class="sticky">sticky</div>
    </div>
    <div class="column_center">
    center contents
    </div>
    <div class="column2">
      <div class="sticky2">sticky2</div>
    </div>
  </div>
  <div class="contents">
  bottom contents
  </div>
</section>

CSS

<style>
.main {}
.sticky, .sticky2 {
  position: sticky;
  width: 100px;
  height: 100px;
  display: block;
}
.sticky {
  top: 50px;
  left: 0;
  background: blue;
  z-index: 1;
  margin: 0;
  padding: 0;
  color: white;
}
.sticky2 {
  right: 0;
  bottom: 0;
  background: lightgreen;
  z-index: 0;
  margin: 0;
  padding: 0;
}
.column {
  overflow: visible;
  width: 25%;
  height: 100%;
}
.column_center{
  width: 50%;
  height: auto;
  background: rgb(255,201,114);
}
.column2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  width: 25%;
  height: 100%;
  overflow: visible;
}
.container {
  display: flex;
  width: 100%;
  height: 1000px;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}
.contents {
  width: 100%;
  height: 500px;
  background: lightcoral;
  position: relative;
}
/* スマホ */
@media only screen and (max-width: 750px) {
  .main {}
  .sticky, .sticky2 {
    position: relative;
    width: 100%;
    height: 100px;
    display: block;
  }
  .sticky {
    top: 0;
    left: 0;
    background: blue;
    z-index: 1;
    margin: 0;
    padding: 0;
    color: white;
  }
  .sticky2 {
    right: 0;
    bottom: 0;
    background: lightgreen;
    z-index: 0;
    margin: 0;
    padding: 0;
  }
  .column {
    width: 100%;
    height: auto;
  }
  .column_center{
    width: 100%;
    height: auto;
  }
  .column2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: auto;
  }
  .container {
    display: block;
    height: auto;
  }
  .contents {
    height: 200px;
  }
}
</style>

以上になります。

参考サイト置き場

なぜなぜ会議をされたことはありますか？

あるんですか？

はい。派遣の頃に(;ﾟ∇ﾟ)/☆

sprocket：なぜなぜ分析とは？3つの手順と5つのコツを解説
https://www.sprocket.bz/blog/20220519-5whys.html

keyence：5回の「なぜ」で導き出す「なぜなぜ分析」とは？
https://www.keyence.co.jp/ss/general/manufacture-tips/5whys.jsp

星間旅路のメロディ

「宇宙の静けさに包まれながら、漂流する過去の音楽を捜し求め、銀河の奥底でその旋律に耳を傾ける。」