I am creating a cover block that has two columns. The div column on the left has some large print text that scrolls with the page, and the div on the right is a sticky element that should stay pinned to the screen while scrolling within the bounds of the cover container.

The trouble I'm having is that I need to allow the text column to control the height of the cover container so that it will not have big gaps (or overflow into the text below) depending on the display size. To do this, I believe I need to set the position type to relative. But when I do this, the sticky element on the right no longer sticks to the screen, but gets pushed down below the text div on the left.

I feel like there is something really simple I'm missing here. Here's a CodePen example I made to illustrate the simplest test case to observe the problem. If you change the position property inside the two_column_cover_text CSS selector from absolute to relative, you'll see the problem there.

https://codepen.io/Jdo300/pen/XWYejJb

There also an odd overlap issue between the sticky and the text column, though that only appears to be happening inside the CodePen example and not on my real site. Any help / insights would be greatly appreciated!

CodePudding user response：

#cover_container {

    background:yellow;
    position:relative;
    
    }
#cover_sticky{
  position:sticky;
  top:0;
  width:50%;
  margin-left:50%;
}
#cover_text{
/*should be the same as the image height*/
margin-top:-100px;
  width:50%;
  heigth:fit-content;
}

img{
width:00px;
height:50px;
}

<div id="cover_container" >

    <!-- Right image sticky-->
    <div id="cover_sticky" >
        <figure id="sticky_figure">
            <img src="https://via.placeholder.com/800x600.jpeg?text=Figure Placeholder">
            <figcaption id="sticky_figure_caption" ><a href="http://placeholder.com">Image</a> courtesy of placeholder.com</figcaption>
        </figure>
    </div>


    <!-- Left text column-->
    <div id="cover_text" >
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
        <h4>Turpis cursus in hac habitasse platea dictumst quisque sagittis. Adipiscing elit pellentesque habitant morbi. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Congue eu consequat ac felis donec et odio pellentesque diam. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Nibh nisl condimentum id venenatis a. Convallis tellus id interdum velit laoreet id. Sit amet aliquam id diam maecenas ultricies mi eget. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Suspendisse interdum consectetur libero id faucibus. Ut aliquam purus sit amet luctus venenatis.</h4>
    </div>


</div>

<div style="height:600px;background:red;"></div>

Hope you get the idea, just play with heights and widths, also removed the mobile section, wasn’t working quite right