CSSでstickyを指定しているのですが、うまく動きません。
以下にcodepenに簡易的なソースを置いておりますが、
potision: sticky;
bottom: 0;
の場合はこのプログラムはうまく動くのですが、
potision: sticky;
top: 0;
の場合はtopが0の時に固定されません。
うまく動作しない理由が知りたいです。
top:0;
とbottom:0;
を組み合わせたいので、両方つけても動くようにしたいです。
回答をお待ちしております。
[これがcodepenのURLです]
https://codepen.io/abinitio/pen/PgrgVX
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;
}
<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>