Фиксированный элемент внутри элемента flexbox - PullRequest
Новая
       36

Фиксированный элемент внутри элемента flexbox

2 голосов
/ 13 апреля 2019

У меня есть фиксированный элемент в левой боковой панели. Левая боковая панель является элементом flexbox.

Когда я применяю position:fixed; к фиксированному элементу, элемент flexbox, содержащий его, сворачивается, и мой фиксированный элемент нежелательно перекрывает содержимое моей страницы.

Я попытался использовать position:sticky; top:0;, однако липкий элемент нежелательно цепляется за верх страницы. Я не могу применить маржу. 

body {
  margin: 0;
}

header {
  border-bottom: 1px solid;
}

footer {
  border-top: 1px solid;
}

#content {
  display: flex;
  margin: 1.5em;
}

.widget {
  width: 300px;
  border: 1px solid;
  padding: 1.5em;
  margin-bottom: 1.5em;
}

#primary {
  margin: 0 1.5em;
}

.widget.fixed {
  position:fixed;
  /*
  position: sticky;
  top: 0;
  */
}
<div id="page">
  <header id="masthead">Header</header>
  <div id="content">
    <aside id="tertiary">
      <section class="widget fixed">Fixed Widget</section>
    </aside>
    <div id="primary">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus integer feugiat scelerisque varius morbi. Adipiscing enim eu turpis egestas pretium aenean pharetra magna. Ultricies
        leo integer malesuada nunc vel. Nec feugiat nisl pretium fusce. In arcu cursus euismod quis viverra. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tellus mauris a diam maecenas sed enim ut sem. At tellus at urna condimentum
        mattis pellentesque. At tempor commodo ullamcorper a lacus. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Laoreet sit amet cursus sit amet dictum. Congue nisi vitae suscipit tellus mauris a. Mi sit amet mauris commodo quis imperdiet
        massa tincidunt nunc. Eget magna fermentum iaculis eu. In metus vulputate eu scelerisque felis imperdiet proin. Sit amet consectetur adipiscing elit.</p>
      <p>Iaculis urna id volutpat lacus laoreet. Eu scelerisque felis imperdiet proin fermentum leo. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Ligula ullamcorper malesuada proin libero nunc. Mauris in aliquam sem fringilla
        ut morbi. At volutpat diam ut venenatis tellus in. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Odio ut sem nulla pharetra. Augue lacus viverra vitae congue eu consequat ac felis donec. Mi bibendum neque egestas congue quisque egestas
        diam. Bibendum neque egestas congue quisque. Quisque sagittis purus sit amet. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Malesuada proin libero nunc consequat interdum varius. Facilisis mauris sit amet massa vitae
        tortor condimentum lacinia quis. Ac auctor augue mauris augue neque. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Amet facilisis magna etiam tempor.</p>
      <p>Massa id neque aliquam vestibulum morbi blandit cursus. Sed blandit libero volutpat sed. Curabitur gravida arcu ac tortor. Accumsan tortor posuere ac ut consequat semper. Est ullamcorper eget nulla facilisi etiam dignissim diam. Nisi est sit amet
        facilisis. Congue eu consequat ac felis donec et. Nec ullamcorper sit amet risus nullam. Non pulvinar neque laoreet suspendisse interdum consectetur. Viverra maecenas accumsan lacus vel facilisis. Sapien et ligula ullamcorper malesuada proin libero
        nunc. Quis risus sed vulputate odio ut enim blandit volutpat maecenas.</p>
      <p>Nisi est sit amet facilisis magna etiam tempor orci. Tristique senectus et netus et malesuada fames. Eu turpis egestas pretium aenean. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Cras semper auctor neque vitae tempus quam pellentesque.
        Cursus in hac habitasse platea. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Ornare suspendisse sed nisi lacus sed viverra tellus. Convallis posuere morbi leo urna molestie at. Accumsan in nisl nisi scelerisque eu ultrices
        vitae auctor. Massa enim nec dui nunc mattis enim. Vel turpis nunc eget lorem. Ac placerat vestibulum lectus mauris. Suspendisse in est ante in nibh. Ipsum a arcu cursus vitae congue mauris. Curabitur vitae nunc sed velit dignissim. Proin sagittis
        nisl rhoncus mattis. Arcu odio ut sem nulla pharetra diam sit.</p>
    </div>
    <aside id="secondary">
      <section class="widget">Widget</section>
      <section class="widget">Widget</section>
      <section class="widget">Widget</section>
    </aside>
  </div>
  <footer id="colophon">Footer</footer>
</div>

Как получить фиксированный элемент внутри элемента flexbox?

1 Ответ

1 голос
/ 13 апреля 2019

Я попытался использовать position:sticky; top:0;, однако липкий элемент нежелательно цепляется за верх страницы. Я не могу применить маржу.

Распространенная ошибка думать, что нам нужно использовать top:0 при использовании position:sticky. в то время как вы можете рассмотреть любое допустимое значение, которое вы хотите.

Для элементов с липким расположением, левый, правый, верхний и нижний являются смещениями от соответствующих ребер его блока потока, которые используются для ограничения смещения элемента. Значения в процентах слева и справа относятся к ширине блока потока; процентные значения сверху и снизу относятся к высоте его блока потока. исх

Таким образом, вы можете просто использовать top:X, где X - это поле, которое вы определили для своего контейнера: 

body {
  margin: 0;
}

header {
  border-bottom: 1px solid;
}

footer {
  border-top: 1px solid;
}

#content {
  display: flex;
  margin: 1.5em;
}

.widget {
  width: 300px;
  border: 1px solid;
  padding: 1.5em;
  margin-bottom: 1.5em;
}

#primary {
  margin: 0 1.5em;
}

.widget.fixed {
  position: sticky;
  top: 1.5em;
}
<div id="page">
  <header id="masthead">Header</header>
  <div id="content">
    <aside id="tertiary">
      <section class="widget fixed">Fixed Widget</section>
    </aside>
    <div id="primary">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus integer feugiat scelerisque varius morbi. Adipiscing enim eu turpis egestas pretium aenean pharetra magna. Ultricies
        leo integer malesuada nunc vel. Nec feugiat nisl pretium fusce. In arcu cursus euismod quis viverra. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tellus mauris a diam maecenas sed enim ut sem. At tellus at urna condimentum
        mattis pellentesque. At tempor commodo ullamcorper a lacus. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Laoreet sit amet cursus sit amet dictum. Congue nisi vitae suscipit tellus mauris a. Mi sit amet mauris commodo quis imperdiet
        massa tincidunt nunc. Eget magna fermentum iaculis eu. In metus vulputate eu scelerisque felis imperdiet proin. Sit amet consectetur adipiscing elit.</p>
      <p>Iaculis urna id volutpat lacus laoreet. Eu scelerisque felis imperdiet proin fermentum leo. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Ligula ullamcorper malesuada proin libero nunc. Mauris in aliquam sem fringilla
        ut morbi. At volutpat diam ut venenatis tellus in. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Odio ut sem nulla pharetra. Augue lacus viverra vitae congue eu consequat ac felis donec. Mi bibendum neque egestas congue quisque egestas
        diam. Bibendum neque egestas congue quisque. Quisque sagittis purus sit amet. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Malesuada proin libero nunc consequat interdum varius. Facilisis mauris sit amet massa vitae
        tortor condimentum lacinia quis. Ac auctor augue mauris augue neque. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Amet facilisis magna etiam tempor.</p>
      <p>Massa id neque aliquam vestibulum morbi blandit cursus. Sed blandit libero volutpat sed. Curabitur gravida arcu ac tortor. Accumsan tortor posuere ac ut consequat semper. Est ullamcorper eget nulla facilisi etiam dignissim diam. Nisi est sit amet
        facilisis. Congue eu consequat ac felis donec et. Nec ullamcorper sit amet risus nullam. Non pulvinar neque laoreet suspendisse interdum consectetur. Viverra maecenas accumsan lacus vel facilisis. Sapien et ligula ullamcorper malesuada proin libero
        nunc. Quis risus sed vulputate odio ut enim blandit volutpat maecenas.</p>
      <p>Nisi est sit amet facilisis magna etiam tempor orci. Tristique senectus et netus et malesuada fames. Eu turpis egestas pretium aenean. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Cras semper auctor neque vitae tempus quam pellentesque.
        Cursus in hac habitasse platea. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Ornare suspendisse sed nisi lacus sed viverra tellus. Convallis posuere morbi leo urna molestie at. Accumsan in nisl nisi scelerisque eu ultrices
        vitae auctor. Massa enim nec dui nunc mattis enim. Vel turpis nunc eget lorem. Ac placerat vestibulum lectus mauris. Suspendisse in est ante in nibh. Ipsum a arcu cursus vitae congue mauris. Curabitur vitae nunc sed velit dignissim. Proin sagittis
        nisl rhoncus mattis. Arcu odio ut sem nulla pharetra diam sit.</p>
    </div>
    <aside id="secondary">
      <section class="widget">Widget</section>
      <section class="widget">Widget</section>
      <section class="widget">Widget</section>
    </aside>
  </div>
  <footer id="colophon">Footer</footer>
</div>

Смежный вопрос для большего количества примеров и чтобы увидеть, что мы можем сделать то же самое с bottom: Почему элемент с позицией: липкий не прилипает к нижней части родителя?

...