0

I am trying to make a div element sticky on my page. When I use position sticky (and yes, it is inside of a parent element), not only is it not sticky, but I can't position it's top value. The left and right work, but not top or bottom. As the user scrolls down the page I want the div to be visible in it's entirety nearly all the way down. Can I achieve this in CSS? Here is some code:

<main class="main-area">
    <header class="header">
        <div class="header__logo-area">
            <img src="/src/assets/svg/logo.svg" alt="ImmediaDent logo">
        </div>
        <div class="header__green-plus">
            <img src="/src/assets/svg/plus large.svg" alt="Large Green Plus" class="header--green-plus">
        </div>
    </header>
</main>

<div class="form">
    <div class="form__form-section">
        This is where the text goes.
    </div>
</div> 

<section class="next">
</section>

.form {
    position: relative;

&__form-section {
position: sticky;
background-color:$colorFormGray;
bottom: 10rem;
top: 10rem;
left:45rem;
height: 40.9375rem + 18.3125rem;
width: 38.5964912%;
border-radius: 20px;
text-align: center;
}

Please let me know if any more code or information is needed. Thank you!

RRhodes
  • 501
  • 6
  • 19
  • Your class is `class="form__form-section` and not `&__form-section` apply the css to the correct class and `.form` class does not have the closing braces. – Kunal Raut Apr 05 '20 at 20:13
  • It's a sass class, so "&__form" = "form__form-section". There is actually a closing brace, it just got cut off. – RRhodes Apr 05 '20 at 20:17

0 Answers0