line-clamp-with-abspos-019-ref.html (835B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Reference</title> 4 <style> 5 #scrollContainer { 6 overflow: scroll; 7 position: relative; 8 font: 16px / 32px serif; 9 height: 4lh; 10 border: 1px solid black; 11 } 12 .clamp { 13 padding: 0 4px; 14 background-color: yellow; 15 } 16 .abspos { 17 position: absolute; 18 top: 1lh; 19 right: 0; 20 width: 50px; 21 height: 50px; 22 margin: 4px; 23 background-color: skyblue; 24 } 25 .rel { 26 position: relative; 27 } 28 </style> 29 30 <div id="scrollContainer"> 31 <div class="clamp"> 32 <div>Line 1</div> 33 <div>Line 2</div> 34 <div>Line 3</div> 35 <div class="rel">Line 4…<div class="abspos"></div></div> 36 </div> 37 </div> 38 39 <script> 40 window.addEventListener("load", () => { 41 const scrollContainer = document.getElementById("scrollContainer"); 42 scrollContainer.scrollTop = scrollContainer.scrollHeight; 43 }); 44 </script>