Why ( position: sticky ) not working in blogger [ solved ]

When you use float CSS in blogger position sticky not working, to solve it use bootstrap library ,or use this CSS setting bellow
<style> html{font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;scroll-behavior: smooth;} *, ::after, ::before { box-sizing: border-box; } body{margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.7; color: #212529; text-align: right; background-color: #fff;word-break: break-word;} /*container*/ .container { width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } @media (min-width: 1200px) .container { max-width: 1140px; } @media (min-width: 992px) .container { max-width: 960px; } @media (min-width: 768px) .container { max-width: 720px; } @media (min-width: 576px) .container { max-width: 540px; } /*container*/ /*row*/ .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } /*row*/ /*col*/ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10{position: relative; width: 100%; padding-left: 15px; padding-right: 15px;} @media (min-width: 768px) {.col-1 { flex: 0 0 10%; max-width: 10%; }} @media (min-width: 768px) {.col-2 { flex: 0 0 20%; max-width: 20%; }} @media (min-width: 768px) {.col-3 { -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; }} @media (min-width: 768px) {.col-4 { -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; }} @media (min-width: 768px) {.col-5 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }} @media (min-width: 768px) {.col-6 { -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; }} @media (min-width: 768px) {.col-7 { -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; }} @media (min-width: 768px) {.col-8 { -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; }} @media (min-width: 768px) {.col-9 { -ms-flex: 0 0 90%; flex: 0 0 90%; max-width: 90%; }} @media (min-width: 768px) {.col-10 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }} /*col*/ </style> <div style="position: sticky;top: 0;z-index:1"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfffxqDrtATTSoqYBcQWW6Z0RJP1IMY7weebNype2rL16nk918VRuN8scyunDBIwW9zSe_62tTjjSYAbE_hDHTcGTl2RYItRUEkf-on8afHE_rlmsAwgYOAFjQe6Ecz8KyowC4UYjB-DR/s0/logo+manajmnt.png" style="height:60px" /> </div> <div class="container"> <div class="row"> <div class="col-1" style="background:#ff8d00; height:200px" >1</div> <div class="col-1" style="background:#ffd400; height:200px" >1</div> <div class="col-1" style="background:#b5ff00; height:200px" >1</div> <div class="col-1" style="background:#0037ff; height:200px" >1</div> <div class="col-1" style="background:#00ffc4; height:200px" >1</div> <div class="col-1" style="background:#fb00ff; height:200px" >1</div> <div class="col-1" style="background:#00ff37; height:200px" >1</div> <div class="col-1" style="background:#00a1ff; height:200px" ></div> <div class="col-1" style="background:red; height:1500px" >1</div> <div class="col-1" style="background:#0c0c0b; height:200px" >1</div> </div> </div> <div style="position: sticky;bottom: 0;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfffxqDrtATTSoqYBcQWW6Z0RJP1IMY7weebNype2rL16nk918VRuN8scyunDBIwW9zSe_62tTjjSYAbE_hDHTcGTl2RYItRUEkf-on8afHE_rlmsAwgYOAFjQe6Ecz8KyowC4UYjB-DR/s0/logo+manajmnt.png" style="height:60px" /> </div> <div style="width:100%;height:60px; background:blue"></div>

© 2025 Manajmnt code

Share to :

☷✎

Related

• Create standard image if your article doesn't contain images using JavaScriptThere are some articles. It's not possible to add an image that expresses the content. You can creat… Read More
• How-to ask user to to verify or accept to remove content of divIn this example we learn how to clear div content editable with button after ask user to verify or a… Read More
• How to Add tooltip using JavaScript onlyIn this example, we'll learn how to create tooltip using javascript only, you don't need html tag or… Read More