CSS position: static — значение свойства

Свойство CSS position

position: staticявляется значением по умолчанию свойства позиционирования CSS.

Когда у элементаpositionзначение установлено вstaticкогда элемент будет следоватьНормальному потокудокумента, то он располагается,не подвержен влиянию top、right、bottom、leftиz-indexвлиянию таких свойств позиционирования, как.

Другими словами,staticозначает, что специальное позиционирование не применяется; элемент просто остаётся там, где он естественно располагается.

Определения слов：staticИз латыниstaticus, означающее «неподвижный, неперемещающийся», указывает на то, что элемент остаётся в исходном положении.

Базовый синтаксис

position: staticявляется самым простым и основным значением свойства позиционирования CSS.

/* 语法 */
position: static;

/* 实际示例 */
.box {
    position: static;
}

Описание свойства

Влияние связанных свойств позиционирования на static

Пример

Разберёмся на примерахposition: staticПоведение.

Пример 1: static — способ позиционирования по умолчанию.

Даже если явно не заданоposition: static, элементы по умолчанию позиционируются как static. Сравним:

Описание эффекта:

Из-за этого вы увидите, что второй блок неtop: 100pxперемещается вниз. Это потому, чтоstaticпозиционированные элементы полностью игнорируютtop、right、bottom、leftэти свойства позиционирования.

Пример 2: для static-элементов нельзя задать z-index

В нормальном потоке документа порядок наложения элементов определяется порядком их появления в HTML. Мы не можем использоватьz-indexдля изменения этого порядка:

Сценарий использования

Хотяposition: staticКажется, что оно «ничего не делает», но оно полезно в следующих сценариях:

Сценарий 1: Сброс позиционирования

Когда нужно отменить ранее заданный эффект позиционирования, можно задатьpositionВернуть обратноstatic：

/* 之前可能是 relative、absolute или  fixed */
.sidebar {
    position: fixed;
    top: 0;
}

/* 现在需要取消固定定位，恢复正常布局 */
.sidebar {
    position: static;  /* 移除固定定位效果 */
}

Сценарий 2: В качестве ориентира для позиционированных дочерних элементов.

Хотяstaticсам он не позиционирован, но может служитьконтекстом позиционированиядля «ориентира»:

/* 父元素设置为 relative，虽然它自己可能是 static */
.parent {
    position: relative;  /* 创建新的定位上下文 */
}

/* 子元素 absolute 会相对于这个 parent 定位 */
.child {
    position: absolute;
    top: 10px;
    left: 10px;
}

Сценарий 3: Отладка и тестирование

Во время разработки, если вы не уверены, почему элемент позиционирован, можно сначала вернуть его обратно кstaticчтобы устранить неполадки:

.debug-element {
    position: static;  /* 临时设为 static 看原始位置 */
}

Примечания

Распространённые заблуждения:Многие новички пытаются использоватьtop: 0、left: 0подобные свойства, чтобы «сбросить» элемент в верхний левый угол, но эти свойства не влияют наstaticэлементы вообще. Если вам нужен такой эффект, следует использоватьrelative、absoluteилиfixedпозиционирование.

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

Итог

position: staticявляется основой позиционирования в CSS; понимание его поведения крайне важно для освоения других методов позиционирования.

Запомните следующие ключевые моменты:

• staticДаpositionЗначение свойства по умолчанию
• staticЭлементы располагаются в соответствии с обычным потоком документа
• top、right、bottom、leftпара свойствstaticэлементНедопустимо
• z-indexпара свойствstaticэлементНедопустимо
• обычно используется для сброса позиционирования или как базовая точка отсчёта для контекста позиционирования.

Свойство CSS position