css tips.md

position sticky

for normal usage

parent shouldnt have

• height
• overflow

for flex, the direct parent should have "try without first"

• align-self: flex-start;

for table header, we stick the th instead cuz any other element wont work :(.

thead th {
    position: sticky;
    z-index: 1;
    top: 0;
    background-color: white;
}

---

backdrop-filter

dont use it directly on a div, instead add a ::before / ::after to that div and apply the backdrop-filter to it

.nav-bar {
    position: sticky;
    background-color: rgba(white, 0.75);

    &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        backdrop-filter: blur(10px);
    }
}

---

background-size: cover
object-fit: cover

if u want to show many small image cards ex.gallery, never use the cover option, because the browser will now try to scale the original image down to fit into the small box ex.50x50 instead use object-fit: fill or background-size: contain.

overall u should avoid using such approach and stick to <img src=""> instead.

---

position sticky on pseudo ::before / ::after

https://codepen.io/ctf0/pen/mKERLd