Как зафиксировать (display:fixed) блок Sidebar, если этот блок находится под display:flex;?

Question

Как зафиксировать (display:fixed) блок Sidebar (Фиолетовый блок), если этот блок находится под display:flex;?

<div class="content">

    <div class="countainer">
        <!-- Main -->
        <main class="main">

        </main>
    </div>



    <!--  Sidebar  -->
    <aside class="sidebar">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
    </aside>
</div><!-- /.content -->

*, *:before, *:after {
    box-sizing: border-box;
}


/* Content
======================*/

.content {
    display: flex;
}


/* Countainer
======================*/

.countainer {
    width: 100%;
    
    order: 2;
}


/* Main
======================*/

.main {
    width: 1000px;
    height: 200px;
    margin: 0 auto;
   
    
    background-color: red;
    
}


/* Sidebar
======================*/

.sidebar {
    width: 280px;
      
    background-color: fuchsia;
    
    order: 1;
}

.sidebar a {
    display: block;
}

Answer 1

Фиолетовый блок должен позиционироваться, как fixed

А что мешает это сделать? Для нужного блока пропишите стили:

position: fixed;
top: 0;
left: 0;

Пример:

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* Content
======================*/

.content {
  display: flex;
}


/* Countainer
======================*/

.countainer {
  overflow: hidden;
  width: 100%;
  order: 2;
}


/* Main
======================*/

.main {
  width: 100%;
  height: 2000px;
  margin: 0 auto;
  padding: 10px 60px;
  background-color: red;
  transition: all 1.5s;
}


/* Sidebar
======================*/

.sidebar {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  background-color: fuchsia;
  order: 1;
  transition: width 1.5s;
}

.sidebar:hover {
  width: 280px;
}

.sidebar:hover~.main {
  transform: translateX(280px);
  background-color: blue;
}

.sidebar a {
  display: block;
}

<div class="content">
  <div class="countainer">
    <!--  Sidebar  -->
    <aside class="sidebar">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
    </aside>
    <!-- Main -->
    <main class="main">Какой-то текст
    </main>
  </div>
</div>
<!-- /.content -->

БЛОГ НА HUSL

Как зафиксировать (display:fixed) блок Sidebar, если этот блок находится под display:flex;?

Ответы (1 шт):