Position sticky image is not working, when I scroll-CodePudding

I have a problem with sticky image. I give top: 0 but it does not work, also I try display: initial but nothing happens. I need when scroll section, image must be sticky on the top until end of section. Before I think the reason is due to parent element due to position: relative, but can not fix

.player-about {
        padding-top: 26px;
        padding-bottom: 96px;
        height: 1000px
}
.player-about-content {
        padding-top: 34px;
        border-top: 1px solid #98a2b3;
        position: relative;
        display: flex;
}

.player-about-content-text {
        width: 55%;
}
p {
        text-align: justify;
}
.player-about-content-img {
        position: sticky;
        top: 0;
        width: 45%;
        display: flex;
        justify-content: flex-end;
              
}

<section >
            <div >
                <div >
                    <div >
                        <h4>Haqqında</h4>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis diam molestie diam aliquet fringilla. Aenean scelerisque nulla vestibulum ipsum lobortis, posuere scelerisque dolor posuere. Sed auctor nulla ut erat lobortis finibus. Aliquam nec risus a lectus aliquet venenatis a vel erat. Ut consectetur ut quam quis accumsan. Quisque ut viverra nisl. Phasellus sollicitudin odio vitae enim cursus, a feugiat nisl aliquam. Pellentesque mi nisl, imperdiet sit amet nisl in, lacinia mattis eros. Maecenas quis tempor lacus.

Donec tempor nisi at condimentum accumsan. Praesent eu dolor placerat, tincidunt magna quis, congue nibh. Donec nec ipsum facilisis, porta velit id, scelerisque est. Phasellus pretium at nisl non luctus. Maecenas pellentesque elementum ante. Quisque vitae luctus ex, at tincidunt nisi. Vivamus accumsan, lectus suscipit congue iaculis, lectus velit varius eros, et dignissim nunc lorem vel sapien. Praesent quam odio, dignissim vel vulputate nec, auctor sit amet erat. Morbi dapibus ante at fermentum aliquam. Phasellus ac accumsan velit, in interdum dui. Suspendisse potenti. In hac habitasse platea dictumst. Fusce lobortis, dui in cursus laoreet, odio enim sagittis lectus, sed faucibus tortor purus auctor lacus.

Nulla porta justo at elit mollis, tempor imperdiet odio dictum. Phasellus efficitur eleifend dolor vel aliquet. Nam pretium tortor ac dui scelerisque rutrum quis sed tellus. Cras luctus in quam ac cursus. Duis tincidunt neque magna, a cursus urna dignissim nec. Maecenas accumsan leo sed neque egestas sollicitudin. Vivamus sapien enim, elementum nec urna venenatis, ultrices tempus sapien. Nullam nec laoreet mauris. Sed vestibulum viverra nibh, luctus consequat eros tincidunt non. Pellentesque at mauris tempor, sagittis leo non, fringilla ante. Maecenas in imperdiet felis, in rhoncus lorem. Aliquam non enim odio.
                         </p>
                    </div>
                    <div >
                        <img src="https://images.freeimages.com/images/previews/531/letter-c-1641882.png" alt="logo">
                    </div>
                </div>
            </div>
        </section>

CodePudding user response：

Since the player-about-content has display flex, the two child divs player-about-content-text and player-about-content-img will take the full height.

To make the position: sticky work on the image you need to add it to the img tag itself.

So something like this should work:

.player-about {
    padding-top: 26px;
    padding-bottom: 96px;
    height: 1000px
}
.player-about-content {
    padding-top: 34px;
    border-top: 1px solid #98a2b3;
    position: relative;
    display: flex;
}

.player-about-content-text {
    width: 55%;
}
p {
    text-align: justify;
}
.player-about-content-img img { /* added the 'img' */
    position: sticky;
    top: 0;
    width: 45%;
    display: flex;
    justify-content: flex-end;
          
}

<section >
            <div >
                <div >
                    <div >
                        <h4>Haqqında</h4>
                        <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis diam molestie diam aliquet fringilla. Aenean scelerisque nulla vestibulum ipsum lobortis, posuere scelerisque dolor posuere. Sed auctor nulla ut erat lobortis finibus. Aliquam nec risus a lectus aliquet venenatis a vel erat. Ut consectetur ut quam quis accumsan. Quisque ut viverra nisl. Phasellus sollicitudin odio vitae enim cursus, a feugiat nisl aliquam. Pellentesque mi nisl, imperdiet sit amet nisl in, lacinia mattis eros. Maecenas quis tempor lacus.

Donec tempor nisi at condimentum accumsan. Praesent eu dolor placerat, tincidunt magna quis, congue nibh. Donec nec ipsum facilisis, porta velit id, scelerisque est. Phasellus pretium at nisl non luctus. Maecenas pellentesque elementum ante. Quisque vitae luctus ex, at tincidunt nisi. Vivamus accumsan, lectus suscipit congue iaculis, lectus velit varius eros, et dignissim nunc lorem vel sapien. Praesent quam odio, dignissim vel vulputate nec, auctor sit amet erat. Morbi dapibus ante at fermentum aliquam. Phasellus ac accumsan velit, in interdum dui. Suspendisse potenti. In hac habitasse platea dictumst. Fusce lobortis, dui in cursus laoreet, odio enim sagittis lectus, sed faucibus tortor purus auctor lacus.

Nulla porta justo at elit mollis, tempor imperdiet odio dictum. Phasellus efficitur eleifend dolor vel aliquet. Nam pretium tortor ac dui scelerisque rutrum quis sed tellus. Cras luctus in quam ac cursus. Duis tincidunt neque magna, a cursus urna dignissim nec. Maecenas accumsan leo sed neque egestas sollicitudin. Vivamus sapien enim, elementum nec urna venenatis, ultrices tempus sapien. Nullam nec laoreet mauris. Sed vestibulum viverra nibh, luctus consequat eros tincidunt non. Pellentesque at mauris tempor, sagittis leo non, fringilla ante. Maecenas in imperdiet felis, in rhoncus lorem. Aliquam non enim odio.
                         </p>
                    </div>
                    <div >
                        <img src="https://images.freeimages.com/images/previews/531/letter-c-1641882.png" alt="logo">
                    </div>
                </div>
            </div>
        </section>