我正在制作一种图像库，左边有按钮，可以触发右边出现相应的图像。我希望右侧出现的任何图像都始终与其描述叠加在一起，因为它将具有位置：粘性值。有没有一种方法，只使用CSS，来检索图像高度，这样我就可以使用它的值和top属性来保持它们的堆叠？
我希望这能有所帮助：
<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> ```
您可以做的一件事是拥有一个inner容器，然后将position: absolute; top: 100%;放在<p>标签上。这将迫使它刚好在内部容器的边界之外。
.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>