54680


CSSでstickyを指定しているのですが、うまく動きません。  
以下にcodepenに簡易的なソースを置いておりますが、

[code]

    potision: sticky;
    bottom: 0;
    
[/code]

の場合はこのプログラムはうまく動くのですが、

[code]

    potision: sticky;
    top: 0;
    
[/code]

の場合はtopが0の時に固定されません。  
うまく動作しない理由が知りたいです。

`top:0;`と`bottom:0;`を組み合わせたいので、両方つけても動くようにしたいです。

回答をお待ちしております。

[これがcodepenのURLです]  
<https://codepen.io/abinitio/pen/PgrgVX>

[code]

    body {
      color: #fff;
      font-family: arial;
      font-weight: bold;
      font-size: 40px;
    }
    
    .main-container {
      max-width: 600px;
      margin: 0 auto;
      border: solid 10px green;
      padding: 10px;
      margin-top: 40px;
    }
    
    .main-container * {
      padding: 10px;
      background: #aaa;
      border: dashed 5px #000;
    }
    
    .main-container *+* {
      margin-top: 20px;
    }
    
    .main-header {
      height: 50px;
      background: #aaa;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    
    .main-content {
      min-height: 1500px;
    }
    
    .main-content2 {
      min-height: 500px;
    }
    
    .main-footer {
      position: -webkit-sticky;
      position: sticky;
      /*   top:0; */
      bottom: 0;
      border-color: red;
    }
[/code]

[code]

    <div>
      <div style="float:left">
        <main class="main-container">
          <header class="main-header">HEADER</header>
          <footer class="main-footer">FOOTER</footer>
        </main>
        <br><br><br><br>
      </div>
      <div style="float:left">
        <div class="main-content">MAIN CONTENT</div>
      </div>
      <div style="float:right">
        <main class="main-container">
          <header class="main-header">HEADER</header>
          <div class="main-content2">MAIN CONTENT</div>
          <footer class="main-footer">FOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTERFOOTER</footer>
        </main>
        <br><br><br><br>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2019-05-02T09:27:09.847
54654
2019-12-13T19:58:13.247
2019-12-13T19:58:13.247
32986
28291
question
html css
stickyがうまく動かない


質問文のコードで、粘着配置要素に対して `top: 0` を指定した場合、画面を読み込んだ状態では閾値を越えていないため、要素は相対配置されます。次に、
`bottom: 0` を指定した場合に、画面を読み込んだ状態では、常に閾値を超えている状態のため、要素が固定配置されます。

* * *

つまり、質問文のコードで `top`
を指定した場合の動作は、粘着配置要素の下にそれ以上スペースが存在しないため、その指定がされていないかのように見えます。この動作は、 `top`
を指定した場合のコードで、粘着配置要素の下にスペースを作成することで確認出来ます。

[code]

    body {
      color: #fff;
      font-family: arial;
      font-weight: bold;
      font-size: 40px;
    }
    
    .main-container {
      max-width: 600px;
      margin: 0 auto;
      border: solid 10px green;
      padding: 10px;
      margin-top: 40px;
    }
    
    .main-container * {
      padding: 10px;
      background: #aaa;
      border: dashed 5px #000;
    }
    
    .main-container *+* {
      margin-top: 20px;
    }
    
    .main-header {
      height: 50px;
      background: #aaa;
    }
    
    .main-content {
      min-height: 1500px;
    }
    
    .main-content2 {
      min-height: 500px;
      height: 150vh;
    }
    
    .main-footer {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      border-color: red;
    }
    
    .box {
      height: 150vh;
    }
[/code]

[code]

    <div>
      <div style="float:left">
        <main class="main-container">
          <header class="main-header">HEADER</header>
          <footer class="main-footer">FOOTER</footer>
        </main>
        <br><br><br><br>
      </div>
      <div style="float:left">
        <div class="main-content">MAIN CONTENT</div>
      </div>
      <div style="float:right">
        <main class="main-container">
          <header class="main-header">HEADER</header>
          <div class="main-content2">MAIN CONTENT</div>
          <footer class="main-footer">FOOTER</footer>
          <div class="box">BOX</div>
        </main>
        <br><br><br><br>
      </div>
    </div>
[/code]

* * *

参考:

  * [position - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/position)


CC BY-SA 4.0
2019-05-03T06:42:57.530
54680
2019-05-03T09:27:03.533
2019-05-03T09:27:03.533
32986
32986
54654
answer