包含在可变高度容器 div 内的固定位置元素

Question

I am trying to make an element(social links) 'fixed' inside of a container div(blog post) that varies in height and doesn't continue past the container. So relative to the container div, not the window itself. If the Footer/Header are 500px in height, the social links span can overflow the blog container div. I would like it to snap to the top or bottom of the container div, only scrolling within.

example: https://jsfiddle.net/j8ayod1v/6/

<header></header>
<div class="blog-container">
 <span class="social-links"></span>

</div>
<footer></footer>

Answer 1

You could try setting the position as sticky or absolute on the element you want to remain "fixed" within the grey container depending on the behavior you're looking for.

I added both below:

 header { background: red; height: 100px; } footer { background: red; height: 300px; } article { position: relative; background: grey; } h1 { padding: 10px 40px; } p { padding: 10px 40px; } span { background: green; top: 0; } .sticky { position: -webkit-sticky; position: sticky; float: left; } .absolute { position: absolute; right: 0; }

 <header> </header> <article> <span class="sticky">Fixed (sticky)</span> <span class="absolute">Fixed (absolute)</span> <h1>Blog Post</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh. Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit. Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia. Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis. </p> </article> <footer> </footer>

Answer 2

Is this what you need?

 header { background: red; height: 500px; } footer { background: red; height: 500px; } article { position: relative; background: grey; } h1 { padding: 10px 40px; } p { padding: 10px 40px; } span { background: green; position: sticky; top:0; }

 <header> </header> <article> <span>Fixed</span> <h1>Blog Post</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh. Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit. Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia. Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis. </p> </article> <footer> </footer>