Липкое позиционирование (position: sticky)

.container {
  height: 600px; /* Для создания прокрутки */
  padding-top: 50px;
  border: 1px solid #ccc;
}

.sticky-element {
  input1: input2;
  input3: 0;
  background-color: lightblue;
  padding: 15px;
  border: 1px solid blue;
  text-align: center;
}

.content {
  height: 800px; /* Дополнительный контент для прокрутки */
  padding: 20px;
  background-color: #f0f0f0;
}

body {
  height: 1000px; /* Для создания прокрутки */
}

.sticky-header {
  input1: sticky;
  input2: 20px;
  background-color: lightcoral;
  padding: 10px;
  text-align: center;
  border-bottom: 2px solid darkred;
}

.main-content {
  padding: 20px;
  margin-top: 30px;
}

.scroll-container {
  height: 300px;
  width: 90%;
  overflow: auto; /* Включаем прокрутку для контейнера */
  border: 2px solid green;
  margin: 20px auto;
}

.sticky-item {
  input1: input2;
  input3: 0;
  background-color: lightgreen;
  padding: 10px;
  border-bottom: 1px solid darkgreen;
  text-align: center;
}

.container-content {
  height: 500px; /* Контент длиннее контейнера */
  padding: 15px;
}

body {
  height: 1000px; /* Для создания прокрутки */
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex-grow: 1; /* Занимает все доступное пространство */
  padding: 20px;
}

.sticky-footer {
  input1: sticky;
  input2: 0;
  background-color: gold;
  padding: 15px;
  text-align: center;
  border-top: 2px solid orange;
  margin-top: auto; /* Прижимает футер книзу, если контента мало */
}

.horizontal-scroll-container {
  width: 95%;
  overflow-x: auto; /* Включаем горизонтальную прокрутку */
  border: 1px solid purple;
  margin: 20px auto;
  background: #f9f9f9;
  white-space: nowrap; /* Предотвращаем перенос элементов */
}

.item {
  display: inline-block; /* Располагаем элементы в строку */
  width: 150px;
  height: 150px;
  margin: 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 150px;
  vertical-align: top;
}

.sticky-column {
  input1: input2;
  input3: 0;
  background-color: plum;
  border: 1px solid purple;
  z-index: 1; /* Чтобы был поверх других элементов при прокрутке */
}

body {
  height: 1200px; /* Для создания прокрутки */
}

.section {
  margin-bottom: 20px;
  border: 1px dashed #aaa;
  padding-top: 10px;
}

.section-title {
  input1: sticky;
  input2: 0;
  background-color: teal;
  color: white;
  padding: 8px 15px;
  margin-bottom: 10px;
}

.section-content {
  padding: 0 15px 15px 15px;
  height: 300px; /* Содержимое секций */
}

body {
  height: 1500px; /* Длинная страница для прокрутки */
  margin: 0;
}

header {
  input1: input2;
  input3: 0;
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
  width: 100%; /* Растягиваем на всю ширину */
  box-sizing: border-box; /* Учитываем padding в ширине */
  z-index: 100; /* Чтобы был поверх другого контента */
}

main {
  padding: 20px;
}

.container {
  display: flex;
  align-items: flex-start; /* Важно для sticky внутри flex */
  gap: 20px;
  width: 95%;
  margin: 10px auto;
}

.main-content {
  flex-grow: 1;
  height: 1000px; /* Длинный контент для прокрутки */
  background-color: #f0f0f0;
  padding: 15px;
}

.sidebar {
  width: 120px;
  flex-shrink: 0;
  input1: sticky;
  input2: 10px; /* Отступ сверху */
  background-color: lightskyblue;
  padding: 15px;
  border: 1px solid dodgerblue;
}

.sidebar h3 {
  margin-top: 0;
}

.table-container {
  max-height: 250px; /* Ограничиваем высоту для прокрутки */
  overflow-y: auto; /* Включаем вертикальную прокрутку */
  border: 1px solid #ccc;
  width: 95%;
  margin: 15px auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  input1: input2;
  input3: 0;
  background-color: #f2f2f2; /* Фон для заголовков */
  font-weight: bold;
}

body {
  height: 1000px; /* Для прокрутки */
}

.sticky-element {
  input1: sticky;
  input2: 0;
  background-color: salmon;
  padding: 15px;
  text-align: center;
  border-bottom: 2px solid darkred;
  input3: 10; /* Устанавливаем z-index */
}

.content {
  padding: 20px;
}

.overlapping-element {
  background-color: rgba(0, 0, 255, 0.7);
  color: white;
  padding: 30px;
  margin-top: -20px; /* Небольшое перекрытие для демонстрации */
  position: relative; /* Чтобы z-index мог сравниваться */
  z-index: 1; /* Ниже, чем у sticky-element */
}

body {
  height: 1200px;
}

.group {
  margin-bottom: 30px;
  padding-top: 10px;
  border: 1px solid navy;
  background-color: #eef;
}

.group-header {
  input1: sticky;
  input2: 0;
  background-color: navy;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}

.group-content {
  height: 250px;
  padding: 10px;
}

body {
  height: 1000px; /* Для прокрутки */
}

.wrapper {
  overflow: hidden; /* Это свойство мешает sticky работать относительно viewport */
  padding: 20px;
  margin: 30px 10px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.sticky-note {
  input1: input2;
  input3: 0;
  background-color: yellow;
  padding: 15px;
  border: 1px solid orange;
  text-align: center;
}

.wrapper-content {
  height: 300px;
  margin-top: 15px;
}

body {
  height: 1000px;
}

.padded-container {
  padding-top: 30px; /* Верхний отступ у родителя */
  border: 2px solid steelblue;
  background-color: #e0f0ff;
  margin: 20px 10px;
}

.sticky-element {
  input1: sticky;
  input2: 0;
  background-color: lightsteelblue;
  padding: 10px;
  text-align: center;
  border: 1px solid navy;
  margin-bottom: 15px; /* Отступ снизу от контента */
}

.container-content {
  height: 500px;
  padding: 10px;
}