Html Question posted in
Some basic documentation can be found here.

Html – Why is position sticky not working as expected?

I’m having some problems trying to identify why in this snippet the container__item--special behaves as a sticky element

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .container {
                display: flex;
                overflow-x: auto;
                position: relative;
            }

            .container__item {
                width: 200px;
                height: 50px;
                border: 1px solid;
                flex-shrink: 0;
            }

            .container__item--special {
                position: sticky;
                left: 0; 
                background-color: red;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="container__item"></div>
            <div class="container__item"></div>
            <div class="container__item container__item--special"></div>
            <div class="container__item"></div>
            <div class="container__item"></div>
            <div class="container__item"></div>
            <div class="container__item"></div>
        </div>
    </body>
</html>

But in here it doesn’t

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .container {
                display: flex;
                flex-direction: column;
                overflow-x: auto;
                position: relative;
            }

            .sub-container {
                display: flex;
            }

            .container__item {
                width: 200px;
                height: 50px;
                border: 1px solid;
                flex-shrink: 0;
            }

            .container__item--special {
                position: sticky;
                left: 0; 
                background-color: red;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="sub-container">
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item container__item--special"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
            </div>
            <div class="sub-container">
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
            </div>
        </div>
    </body>
</html>
Tags:

2

Answers


  1. 0

    Please review below updated code where only the CSS in the "sub-container" and "container" class needs modification. You just need to add "container" class css to "sub-container" class.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          .container {
              display: flex;
              flex-direction: column;
          }
          .sub-container {
              display: flex;
              overflow-x: auto;
              position: relative;
          }

          .container__item {
              width: 200px;
              height: 50px;
              border: 1px solid;
              flex-shrink: 0;
          }

          .container__item--special {
              position: sticky;
              left: 0; 
              background-color: red;
          }
        </style>
    </head>
    <body>
         <div class="container">
             <div class="sub-container">
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item container__item--special"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
            </div>
            <div class="sub-container">
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
                <div class="container__item"></div>
            </div>
        </div>
    </body>
</html>

    Please update here if this works for you.

    Login or Signup to reply.
  2. 0

    Add some border to the parent element to understand what is happening:

    .container {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  position: relative;
}

.sub-container {
  display: flex;
  border: 2px solid green;
}

.container__item {
  width: 200px;
  height: 50px;
  border: 1px solid;
  flex-shrink: 0;
}

.container__item--special {
  position: sticky;
  left: 0;
  background-color: red;
}
    <div class="container">
  <div class="sub-container">
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item container__item--special"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
  </div>
  <div class="sub-container">
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
  </div>
</div>

    You have a little space for the sticky behavior because the parent is limited to its parent width due to the stretch default alignment. Disable it and it will work as you like

    .container {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  position: relative;
}

.sub-container {
  display: flex;
  align-self: start; /* added */
  border: 2px solid green;
}

.container__item {
  width: 200px;
  height: 50px;
  border: 1px solid;
  flex-shrink: 0;
}

.container__item--special {
  position: sticky;
  left: 0;
  background-color: red;
}
    <div class="container">
  <div class="sub-container">
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item container__item--special"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
  </div>
  <div class="sub-container">
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
    <div class="container__item"></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search