Keep a variable-height sticky image and sticky p element vertically stacked CSS

user_17818197 0
Viewed 32

I'm making a kind of image gallery with buttons on the left which trigger the emergence of corresponding images on the right. I want whatever image emerges on the right side be stacked with its description at all times, since it will have position:sticky value. Is there a way, only using CSS, to retrieve the image height so I can use its value along with top property to keep them stacked?

I hope this helps:

<style>
.container{
        display:flex;
        flex-direction:row;
        padding:0;
        margin:0;
      }
      .left{
        width:70%;
      }
      .right{
        text-align:center;
        flex:1;
      }
      #big{
        width:16em;
        margin-bottom:5em;
      }
      .right *{
        position: -webkit-sticky;
        position: sticky;
        top:14em;
      }
      .right p{
      margin-bottom:5em;
        top:31em;
      }
</style>
 <body>
<div class="container">
<div class="left">This is where buttons go</div>
<div class="right"><img id="big" src="ThisImageWillChange.jpg"><p>This description will change according to the image</p></div>
</div>
</body> ```
css
1 Answers

One thing you could do is have an inner container, then put position: absolute; top: 100%; on the <p> tag. This would force it just outside the bounds of the inner container.

.container{
        display:flex;
        flex-direction:row;
        padding:0;
        margin:0;
      }
      .left{
        width:70%;
      }
      .right{
        text-align:center;
        flex:1;
      }
      #big{
        width:16em;
        margin-bottom:5em;
      }
      .right *{
        position: -webkit-sticky;
        position: sticky;
        top:14em;
      }
      .right p{
        position: aboslute;
        top:100%;
      }
<body>
  <div class="container">
    <div class="left">This is where buttons go</div>
    <div class="right">
      <div class="inner">
        <img id="big" src="https://www.fillmurray.com/200/200">
        <p>This description will change according to the image</p>
      </div>
      
    </div>
  </div>
</body>

user_175324820
Related