Глубокое понимание липкого позиционирования

CSS

Позиционирование может быть просто понято как вязкийrelativeа такжеfixed

основная концепция

  • блок потока

    Относится к ближайшему липкому позиционированному элементу可滚动元素Поле размера (для элементов, чье значение атрибута переполнения не отображается) или окно просмотра браузера, если нет прокручиваемого элемента.

  • Липкий ограничивающий прямоугольник

    то есть прямоугольник родительского элемента липкого элемента макета

характеристика

  • Когда липкий прямоугольник ограничения находится в пределах видимого диапазона, какrelative, иначе этоfixed
  • Если элементы вязкости нацеливаются на элементы и его родительский элемент, когда вертикальная прокрутка, позиционирование вязкого эффекта не отображается
  • Его эффект позиционирования полностью ограничен родительскими элементами. Если родительский элементoverflowсвойство установленоscroll,auto,overlayзначение, то липкое позиционирование не удастся

кейс 

<body>
    <div>
        <nav>导航</nav>
    </div>
</body>

body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {
    height: 200px;
    margin-top: 50px;
    border: solid deepskyblue;
    width: 400px;
    background-color: deepskyblue;
}
nav {
    position: sticky;
    top: 20px;
    background: yellow;
    height: 60px;
    line-height: 60px;
}

  • Случай 2 (многоэлементный вязкий эффект)
<body>
    <div>
        <nav>导航</nav>
        <header>头部</header>
    </div>
</body>

body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {
    height: 200px;
    margin-top: 50px;
    border: solid deepskyblue;
    width: 400px;
    background-color: deepskyblue;
}
nav {
    position: sticky;
    top: 20px;
    background: yellow;
    height: 60px;
    line-height: 60px;
}
header {
    position: sticky;
    top: 20px;
    background: green;
    height: 60px;
    line-height: 60px;
    display: block;
}

Можно видеть, что когда в родительском элементе есть два липких элемента, липкий элемент сзади будет закрывать липкий элемент впереди при его прокрутке.

Однако, если вы установите желтую навигациюz-index:20Зеленая головка наборz-index:19, то желтый цвет заменит зеленый, а не исходный эффект «приход из-за спины». Ведь при липком эффекте действие элемента вполнеposition:fixed,z-indexвступит в силу.

Ссылка на эту статью:

у-у-у-у. palms.com/WordPress/2…

у-у-у-у. palms.com/WordPress/2…

В этой статье используетсяmdniceнабор текста

В этой статье используетсяmdniceнабор текста

Категории