Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div

Программирование, разработка, тестирование

→

Html & CSS

→

Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML

Посмотрели 3175 раз(а)

Div всегда виден при скролинге (position:fixed, position:sticky) | HTML

последнее обновление: 4 января 2022

1) Используем position:fixed; top:80px; right:50px; Это значит что всегда всегда позиция будет фиксированной и никогда не поменяется

Пример смотрим, тестируем

Исходный код

Использую style='position:fixed; top:80px; right:50px;'
Это значит что всегда всегда позиция будет фиксированной и никогда не поменяется.

Html

<body>

     <table border='0' width='100%'>
     <tr>
          
          <td width='50%'>
               Day 1<BR>
               Day 2<BR>
               Day 3<BR>
               Day 4<BR>
               Day 5<BR>
               Day 6<BR>
               Day 7<BR>
               Day 8<BR>
               Day 9<BR>
               Day 10<BR>
               Day 11<BR>
               Day 12<BR>
               Day 13<BR>
               Day 14<BR>
               Day 15<BR>
               Day 16<BR>
               Day 17<BR>
               Day 18<BR>
               Day 19<BR>
               Day 20<BR>
               Day 21<BR>
               Day 22<BR>
               Day 23<BR>
               Day 24<BR>
               Day 25<BR>
               Day 26<BR>
               Day 27<BR>
               Day 28<BR>
               Day 29<BR>
               Day 30<BR>
               Day 31<BR>
               Day 32<BR>
               Day 33<BR>
               Day 34<BR>
               Day 35<BR>
               Day 36<BR>
               Day 37<BR>
               Day 38<BR>
               Day 39<BR>
               Day 40<BR>
          </div>

          
          <td width='50%' style='vertical-align:top;'>

               <div style='border:2px solid blue; width:260px;'>Good morning!<BR> Coffee or tea?</div>

               <div style='position:fixed; top:80px; right:50px; border:2px solid green;'>Position=fixed.I want to eat</div>
          </td>
     </tr>
     </table>

</body>

Реузультат

2) Используем position:sticky. Это значит что элемент будет прилегать к верхнему элементу и если не будет в верху элемента то к вверху окошка.

Пример смотрим, тестируем

Исходный код

Использую style='position:sticky;'
sticky значит что элемент будет прилегать к верхнему элементу и если не будет в верху элемента то к вверху окошка.

<body>

     <table border='0' width='100%'>
     <tr>
          
          <td width='50%'>
               Day 1<BR>
               Day 2<BR>
               Day 3<BR>
               Day 4<BR>
               Day 5<BR>
               Day 6<BR>
               Day 7<BR>
               Day 8<BR>
               Day 9<BR>
               Day 10<BR>
               Day 11<BR>
               Day 12<BR>
               Day 13<BR>
               Day 14<BR>
               Day 15<BR>
               Day 16<BR>
               Day 17<BR>
               Day 18<BR>
               Day 19<BR>
               Day 20<BR>
               Day 21<BR>
               Day 22<BR>
               Day 23<BR>
               Day 24<BR>
               Day 25<BR>
               Day 26<BR>
               Day 27<BR>
               Day 28<BR>
               Day 29<BR>
               Day 30<BR>
               Day 31<BR>
               Day 32<BR>
               Day 33<BR>
               Day 34<BR>
               Day 35<BR>
               Day 36<BR>
               Day 37<BR>
               Day 38<BR>
               Day 39<BR>
               Day 40<BR>
          </div>

          
          <td width='50%' style='vertical-align:top;'>

               <div style='border:2px solid blue; width:260px;'>Good morning!<BR> Coffee or tea?</div>

               <div style='position:sticky; top:10; border:2px solid green;'>Position=fixed.I want to eat</div>
          </td>
     </tr>
     </table>

</body>

Реузультат