Как называется позиционирование когда элемент стоит на месте?

Static Positioning

Позиционирование, при котором элемент стоит на месте и не смещается относительно своего нормального потока, называется static positioning. Это значение по умолчанию для всех HTML-элементов в CSS.

Свойство position: static

В CSS это значение свойства position:

// CSS
const styles = `
  .element {
    position: static;
  }
`;

// Или в React
const Element = () => (
  <div style={{ position: 'static' }}>
    Элемент остается на своем месте
  </div>
);

Характеристики static positioning

Поведение

• Элемент отображается в нормальном потоке документа
• Свойства top, bottom, left, right игнорируются
• Свойство z-index не применяется
• Элемент занимает свое естественное место в разметке

Пример

// Неправильно - эти свойства не будут работать
const BadExample = () => (
  <div style={{
    position: 'static',
    top: '50px',        // Будет проигнорировано
    left: '100px',      // Будет проигнорировано
    zIndex: 10          // Будет проигнорировано
  }}>
    Смещение не произойдет
  </div>
);

Сравнение с другими типами позиционирования

const positioningTypes = {
  static: {
    default: true,
    description: 'Нормальный поток',
    supportsOffset: false,
    zIndexWorks: false
  },
  relative: {
    description: 'Относительно своего нормального места',
    supportsOffset: true,
    zIndexWorks: true
  },
  absolute: {
    description: 'Относительно ближайшего позиционированного предка',
    supportsOffset: true,
    zIndexWorks: true
  },
  fixed: {
    description: 'Относительно viewport',
    supportsOffset: true,
    zIndexWorks: true
  },
  sticky: {
    description: 'Гибридное: static + fixed',
    supportsOffset: true,
    zIndexWorks: true
  }
};

Когда использовать static

• По умолчанию для всех элементов (не нужно явно указывать)
• Когда нужно переопределить другое значение position:

const Example = () => (
  <>
    <div style={{ position: 'absolute' }}>Позиционирован</div>
    <div style={{ position: 'static' }}>Вернулся в нормальный поток</div>
  </>
);

Важные заметки

• Static - это значение по умолчанию, поэтому обычно его не пишут явно
• Используется редко, в основном для сброса position у элемента
• В Tailwind CSS класс для этого - static
• В real-world разработке чаще используются relative, absolute, fixed, sticky