[Résolu] Position fixed par rapport à un div

Bonjour.

Je souhaite positionner un bloc en position fixée par rapport à son parent alors que celui-ci est scrollable :


Ce bloc est conditionné au nombre d'éléments dans le parent.

J'ai fait ce code HTML :

<ul class="parent">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
</ul>

et ce code CSS :

.parent {
    max-height: 297px;
    transition: max-height .5s ease-out;
    overflow-y: auto;
    position: relative;
    transform: translateZ(0); //nécessaire pour que la position: fixed du dégradé du bas soit sur cet élément et non le viewport
}
.parent > li {
    height: 35px;
    display: flex();
    justify-content: center;
    align-items: center;
}
.parent > li:nth-child(9):after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(0,0,0, 0) 0%, rgba(0,0,0, .1) 100%);
}

Ce code positionne bien le dégradé en bas du parent, mais il n'est pas fixé, il se déplace avec le scroll…

Quelqu’un voit pourquoi ?

Super !

Cela ne répond pas à ma question du « pourquoi mon fixed n'est pas fixé », mais cela semble faire ce que je veux (à quelques pouillèmes près).

Merci.

Reste à mettre en œuvre…
Modifié par Derwoed (06 Mar 2020 - 19:05)