title: CSS sticky element showing up sooner than it should
body: <p>I've been stuck with a problem with a sticky element in a web form. It works as it should (moves along with column headers and sticks in position upon reaching the preset &quot;top&quot; coordinates... however, it shows up before it should! This causes me to end up with a green rectangle blocking the view at the bottom of the page.</p>
  <p>I guess it has to do with its parent container and the fact that there's another sticky element above the one causing trouble. But I can't figure out the solution.</p>
  <p>I'm attaching the HTML and CSS for reference. The problematic element has a class name &quot;whitebkgrd_worksession_2&quot; (the first instance in the CSS is embbeded in a media query.)</p>
  <p>Thanks!</p>
  <pre><code>        &lt;section&gt;
          &lt;h2 class=&quot;worksessionsticky&quot;&gt;En sesión de trabajo con Gerente de Servicio y Líder de Calidad&lt;/h2&gt;
          &lt;fieldset class=&quot;WorkSession&quot;&gt;
  
  &lt;div class=&quot;whitebkgrd_worksession&quot;&gt;&lt;/div&gt;
  &lt;p class=&quot;form8header1&quot;&gt;Encuesta de Pulso&lt;/p&gt;
  &lt;p class=&quot;form8header2&quot;&gt;Sí&lt;/p&gt;
  &lt;p class=&quot;form8header3&quot;&gt;No&lt;/p&gt;
  &lt;p class=&quot;form8header4&quot;&gt;Comentarios&lt;/p&gt;
  &lt;p class=&quot;form8header5&quot;&gt;Material de apoyo para DMA&lt;/p&gt;
  
              
              &lt;label class=&quot;form8item1&quot;&gt;1. ¿Existe correlación entre resultados de PULSO y CSI?
  &lt;br&gt;
  &lt;br&gt;PULSO CSI &amp;#47; NPS &amp;#62; Platforma CSI &amp;#47; NPS &amp;#38; VOC ---&amp;#62; Requiere
  Plan de acción&lt;/label&gt;
              &lt;input class=&quot;form8item1radio1&quot; type=&quot;radio&quot; name=&quot;section2q1&quot; id=&quot;ah&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item1radio2&quot; type=&quot;radio&quot; name=&quot;section2q1&quot; id=&quot;ai&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;form8item1comment&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
  
  &lt;div class=&quot;borderline12&quot;&gt;&lt;/div&gt;
              
  &lt;p class=&quot;multianswer5&quot;&gt;El Distribuidor ha difundido y asegurado que cada
  integrante en servicio aplique:&lt;/p&gt;         
              &lt;label class=&quot;form8item2_1&quot;&gt;2. Infografía de Pulso (Enfoque y mejores prácticas)&lt;/label&gt;
              &lt;input class=&quot;form8item2_1radio1&quot; type=&quot;radio&quot; name=&quot;section2q2_1&quot; id=&quot;aj&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item2_1radio2&quot; type=&quot;radio&quot; name=&quot;section2q2_1&quot; id=&quot;ak&quot; value=&quot;Reject2&quot;&gt;
  
              &lt;label class=&quot;form8item2_2&quot;&gt;3. Script de Pulso (¿Cómo invitar a los Clientes a contestar pulso?)&lt;/label&gt;
              &lt;input class=&quot;form8item2_2radio1&quot; type=&quot;radio&quot; name=&quot;section2q2_2&quot; id=&quot;al&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item2_2radio2&quot; type=&quot;radio&quot; name=&quot;section2q2_2&quot; id=&quot;am&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;multicomm5&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
              
  &lt;div class=&quot;borderline13&quot;&gt;&lt;/div&gt;
              
  &lt;p class=&quot;multianswer6&quot;&gt;La notificación de HOT ALERTS en la aplicación de Pulso
  funciona correctamente para:&lt;/p&gt;            
              &lt;label class=&quot;form8item3_1&quot;&gt;4. Gerente de Servicio&lt;/label&gt;
              &lt;input class=&quot;formitem3_1radio1&quot; type=&quot;radio&quot; name=&quot;section2q3_1&quot; id=&quot;an&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;formitem3_1radio2&quot; type=&quot;radio&quot; name=&quot;section2q3_1&quot; id=&quot;ao&quot; value=&quot;Reject2&quot;&gt;
  
              &lt;label class=&quot;form8item3_2&quot;&gt;5. Líder de Calidad&lt;/label&gt;
              &lt;input class=&quot;formitem3_2radio1&quot; type=&quot;radio&quot; name=&quot;section2q3_2&quot; id=&quot;ap&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;formitem3_2radio2&quot; type=&quot;radio&quot; name=&quot;section2q3_2&quot; id=&quot;aq&quot; value=&quot;Reject2&quot;&gt;
  
              &lt;label class=&quot;form8item3_3&quot;&gt;Personal asignado para atender Clientes (especificar qué puestos tienen)&lt;/label&gt;
              &lt;textarea class=&quot;multicomm6&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
  
  &lt;div class=&quot;borderline14&quot;&gt;&lt;/div&gt;
              
              &lt;p class=&quot;form8itemadded&quot;&gt;El Gerente de Servicio y Líder de Calidad deberán mostrar si:&lt;/p&gt;
  
              &lt;label class=&quot;form8itemadded_1&quot;&gt;6. Conocen dónde revisar su calificación de CSI/NPS de Pulso&lt;/label&gt;
              
              &lt;input class=&quot;formitemaddedradio1&quot; type=&quot;radio&quot; name=&quot;section2qadded&quot; id=&quot;at2&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;formitemaddedradio2&quot; type=&quot;radio&quot; name=&quot;section2qadded&quot; id=&quot;au2&quot; value=&quot;Reject2&quot;&gt;
  
              &lt;label class=&quot;form8itemadded_2&quot;&gt;7. Cumplen con el objetivo del 70% de Encuestas de Pulso vs OR (público y garantía)&lt;/label&gt;
              
              &lt;input class=&quot;formitemadded_2radio1&quot; type=&quot;radio&quot; name=&quot;section2qadded2&quot; id=&quot;at2_2&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;formitemadded_2radio2&quot; type=&quot;radio&quot; name=&quot;section2qadded2&quot; id=&quot;au2_2&quot; value=&quot;Reject2&quot;&gt;
              
              
              &lt;textarea class=&quot;multicommadded&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
  
      &lt;div class=&quot;borderline15&quot;&gt;&lt;/div&gt;
              
              &lt;label class=&quot;form8item4&quot;&gt;8. ¿El Distribuidor analiza la calidad de información en Encuestas de Pulso?&lt;/label&gt;
              &lt;input class=&quot;formitem4radio1&quot; type=&quot;radio&quot; name=&quot;section2q4&quot; id=&quot;at&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;formitem4radio2&quot; type=&quot;radio&quot; name=&quot;section2q4&quot; id=&quot;au&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;multicomm7&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
  
              
  &lt;p class=&quot;form8item4note1&quot;&gt;Si alguno de los puntos de análisis no se realiza, el punto 5 se encuentra en incumplimiento (marcar la casilla “NO”):&lt;/p&gt;
  &lt;p class=&quot;form8item4note2&quot;&gt;-% de encuestas sin comentarios vs total de encuestas en el mes&lt;/p&gt;
  &lt;p class=&quot;form8item4note3&quot;&gt;-% de encuestas comentarios SENTIMIENTO NEGATIVO vs total de encuestas en el mes&lt;/p&gt;
  &lt;p class=&quot;form8item4note4&quot;&gt;-% de Hot Alerts en Pulso vs total de encuestas en el mes&lt;/p&gt;
  &lt;p class=&quot;form8item4note5&quot;&gt;-Acciones puntuales de mejora con base en el análisis de información de la Encuesta de Pulso&lt;/p&gt;
  
  &lt;div class=&quot;borderline16&quot;&gt;&lt;/div&gt;
              
              &lt;label class=&quot;form8item2ndadded&quot;&gt;9. ¿Cuenta el Distribuidor con un proceso de recuperación de clientes por HA de Pulso (evidencia de procesos y responsables, así como casos documentados)?&lt;/label&gt;
              &lt;input class=&quot;formitem2ndaddedradio1&quot; type=&quot;radio&quot; name=&quot;section2qadded3&quot; id=&quot;at3&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;formitem2ndaddedradio2&quot; type=&quot;radio&quot; name=&quot;section2qadded3&quot; id=&quot;au3&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;multicommadded2&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
  
  &lt;div class=&quot;borderline17&quot;&gt;&lt;/div&gt;
              
  &lt;div class=&quot;form8jobaid1_back&quot;&gt;
  &lt;/div&gt;
  &lt;p class=&quot;form8jobaid1&quot;&gt;Reporte mensual revisado
      &lt;br&gt;Resultados CX&lt;/p&gt;
  
  
  &lt;div class=&quot;form8jobaid2_back&quot;&gt;
  &lt;/div&gt;
  &lt;p class=&quot;form8jobaid2&quot;&gt;&lt;a  target=&quot;_blank&quot;&gt;Infografía digital Pulso&lt;/a&gt;
      &lt;br&gt;&lt;a  target=&quot;_blank&quot;&gt;Script aplicación encuesta de Pulso&lt;/a&gt;&lt;/p&gt;
  
  
  &lt;div class=&quot;form8jobaid3_back&quot;&gt;
  &lt;/div&gt;
  &lt;p class=&quot;form8jobaid3&quot;&gt;&lt;a  target=&quot;_blank&quot;&gt;Manual de usuario de plataforma de Pulso&lt;/a&gt;&lt;/p&gt;
  
  
  &lt;div class=&quot;whitebkgrd_worksession_2&quot;&gt;&lt;/div&gt;
  &lt;p class=&quot;form8header1_2&quot;&gt;CSI &amp;#38; VOC&lt;/p&gt;
  &lt;p class=&quot;form8header2_2&quot;&gt;Sí&lt;/p&gt;
  &lt;p class=&quot;form8header3_2&quot;&gt;No&lt;/p&gt;
  &lt;p class=&quot;form8header4_2&quot;&gt;Comentarios&lt;/p&gt;
  &lt;p class=&quot;form8header5_2&quot;&gt;Material de apoyo para DMA&lt;/p&gt;
  
      
              &lt;label class=&quot;form8item5&quot;&gt;10. ¿Existe un proceso para asegurar la calidad de los registros en su DMS para las encuestas de CSI?&lt;/label&gt;
              &lt;input class=&quot;form8item5radio1&quot; type=&quot;radio&quot; name=&quot;section2q5&quot; id=&quot;av&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item5radio2&quot; type=&quot;radio&quot; name=&quot;section2q5&quot; id=&quot;aw&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;form8item5comment&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
          
  &lt;div class=&quot;borderline18&quot;&gt;&lt;/div&gt;
              
              
              &lt;label class=&quot;form8item6&quot;&gt;11. ¿Cuenta con esquema retador y alcanzable de bonificación por cumplimiento de CSI y “0” HA para Asesores de Servicio?&lt;/label&gt;
              &lt;input class=&quot;form8item6radio1&quot; type=&quot;radio&quot; name=&quot;section2q6&quot; id=&quot;ax&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item6radio2&quot; type=&quot;radio&quot; name=&quot;section2q6&quot; id=&quot;ay&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;form8item6comment&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
          
  &lt;div class=&quot;borderline19&quot;&gt;&lt;/div&gt;
              
              &lt;label class=&quot;form8item7&quot;&gt;12. ¿El Distribuidor conoce las 3 prioridades de mejora con base a sus VERBATIMS? (Sentimiento Negativo)&lt;/label&gt;
              &lt;input class=&quot;form8item7radio1&quot; type=&quot;radio&quot; name=&quot;section2q7&quot; id=&quot;az&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item7radio2&quot; type=&quot;radio&quot; name=&quot;section2q7&quot; id=&quot;aaa&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;form8item7comment&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
  
  &lt;div class=&quot;borderline20&quot;&gt;&lt;/div&gt;
              
              &lt;label class=&quot;form8item8&quot;&gt;13. ¿Cuenta con revisiones programadas con su equipo de
  servicio para revisar PULSO y desempeño de CSI / NPS (Plataforma de InMoment)? ¿Tiene evidencia?&lt;/label&gt;
              &lt;input class=&quot;form8item8radio1&quot; type=&quot;radio&quot; name=&quot;section2q8&quot; id=&quot;aab&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item8radio2&quot; type=&quot;radio&quot; name=&quot;section2q8&quot; id=&quot;aac&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;form8item8comment&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
          
  &lt;div class=&quot;borderline21&quot;&gt;&lt;/div&gt;
              
              &lt;label class=&quot;form8item9&quot;&gt;14. ¿El Gerente de Servicio revisa con su equipo el One
  Pager de Posventa?&lt;/label&gt;
              &lt;input class=&quot;form8item9radio1&quot; type=&quot;radio&quot; name=&quot;section2q9&quot; id=&quot;aad&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item9radio2&quot; type=&quot;radio&quot; name=&quot;section2q9&quot; id=&quot;aae&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;form8item9comment&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
  
  &lt;div class=&quot;borderline22&quot;&gt;&lt;/div&gt;
              
              &lt;label class=&quot;form8item10&quot;&gt;15. ¿Cuenta con acciones puntuales en su Plan de Mejora considerando los resultados de CSI / NPS &amp;#38; Verbatims?&lt;/label&gt;
              &lt;input class=&quot;form8item10radio1&quot; type=&quot;radio&quot; name=&quot;section2q10&quot; id=&quot;aaf&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item10radio2&quot; type=&quot;radio&quot; name=&quot;section2q10&quot; id=&quot;aag&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;form8item10comment&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
  
  &lt;div class=&quot;borderline23&quot;&gt;&lt;/div&gt;
              
              &lt;label class=&quot;form8item11&quot;&gt;16. ¿El personal de Servicio ha acreditado el WBT del
  Proceso Revisado de atención en Servicio?&lt;/label&gt;
              &lt;input class=&quot;form8item11radio1&quot; type=&quot;radio&quot; name=&quot;section2q11&quot; id=&quot;aah&quot; value=&quot;Accept2&quot; required&gt;
              &lt;input class=&quot;form8item11radio2&quot; type=&quot;radio&quot; name=&quot;section2q11&quot; id=&quot;aai&quot; value=&quot;Reject2&quot;&gt;
              &lt;textarea class=&quot;form8item11comment&quot; placeholder=&quot;Escribe tus notas aquí&quot;&gt;&lt;/textarea&gt;
  &lt;p class=&quot;form8item11note&quot;&gt;Verificar si han revisado el VIDEO y que cuenten con la infografía digital&lt;/p&gt;
  
  &lt;div class=&quot;form8jobaid4_back&quot;&gt;
  &lt;p class=&quot;form8jobaid4&quot;&gt;&lt;a  target=&quot;_blank&quot;&gt;Reportes de calidad de registros&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
              
  &lt;div class=&quot;form8jobaid5_back&quot;&gt;         
  &lt;p class=&quot;form8jobaid5&quot;&gt;&lt;a target=&quot;_blank&quot;&gt;Esquema base comisiones por CSI&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
              
  &lt;div class=&quot;form8jobaid6_back&quot;&gt;         
  &lt;p class=&quot;form8jobaid6&quot;&gt;&lt;a  target=&quot;_blank&quot;&gt;Dashboard verbatims - Encuestas de CSI&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
              
  &lt;div class=&quot;form8jobaid7_back&quot;&gt;         
  &lt;p class=&quot;form8jobaid7&quot;&gt;OnePager posventa CSI&lt;/p&gt;
  &lt;/div&gt;
              
  &lt;div class=&quot;form8jobaid8_back&quot;&gt;         
  &lt;p class=&quot;form8jobaid8&quot;&gt;&lt;a target=&quot;blank&quot;&gt;Proceso rediseñado &quot;Atención a clientes en Servicio&quot;&lt;/a&gt;
              &lt;br&gt;&lt;a  target=&quot;_blank&quot;&gt;Video e infografía digital&lt;/a&gt;&lt;/p&gt;
  
              &lt;/div&gt;
  
          &lt;/fieldset&gt;
  
  &lt;p class=&quot;page2footer&quot;&gt;Acordar acción requerida por parte del Distribuidor dentro del PLAN DE ACCIÓN para respuestas “NO”.&lt;/p&gt;
  
          &lt;/section&gt;
      &lt;/main&gt;
                  &lt;/fieldset&gt;
              
          &lt;/section&gt;
      
          &lt;/form&gt;
  
  &lt;/body&gt;
      
  &lt;/html&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>@media (orientation: portrait){
      label, p, input, placeholder {
          font-size: 0.8em
      }
      .worksessionsticky {
          font-size: 1em;
      }
      
      .form3header1, .form7header1, 
      .form3item1, .form3item2, 
      .form7item1, .form7item2,
      .counter, .percentage {
          font-size: 0.65em;
          }
  
      .receptionsticky, .followupsticky, .deliverysticky, .worksessionsticky {
      position: sticky;
      top: 85px;
      z-index: 1;
      -webkit-overflow-scrolling: auto;
      backface-visibility: hidden;
      width: 102%;
      padding-top: 15px;
  
          
  }
  
  .form8header1, .form8header2, .form8header3,
  .form8header4, .form8header5, .form8header1_2,
  .form8header2_2, .form8header3_2, .form8header4_2,
  .form8header5_2 {
  position: sticky;
  top: 140px;
  z-index: 0;
  padding-top: 25px;
  -webkit-overflow-scrolling: auto;
  backface-visibility: hidden;
  }
  
      
  .whitebkgrd_worksession_2 {
      position: sticky;
      top: 130px;
      left: 0px;
      bottom: 0;
      z-index: 0;
      padding-top: 9px;
      -webkit-overflow-scrolling: auto;
      backface-visibility: hidden;
      grid-column: 1 / 6;
      width: 108%;
      height: 78px;
      margin-left: 0;
      background-color: lightgreen;
      grid-row: 20;
  
  }
  
  }
  
  
  .whitebkgrd_worksession_2 {
      position: sticky;
      z-index: 0;
      top: 130px;
      left: 0px;
      bottom: 0;
      padding-top: 9px;
      -webkit-overflow-scrolling: auto;
      backface-visibility: hidden;
      grid-column: 1 / 6;
      width: 108%;
      height: 78px;
      margin-left: 0;
      background-color: lightgreen;
      grid-row: 20;
  }
  
  
  
  </code></pre>