FlexBox - абсолютная позиция ведет себя как фиксированная - PullRequest
Новая
       26

FlexBox - абсолютная позиция ведет себя как фиксированная

0 голосов
/ 08 июня 2018

У меня есть очень простая задача, которая, кажется, должна быть проста для выполнения, используя любой язык разметки GUI, который на самом деле ДЕЙСТВУЕТ.К сожалению, HTML / CSS не является таким языком разметки.

В приведенном ниже примере.У меня есть макет страницы «Святой Грааль», который использует стили Flexbox в CSS.Основной макет в порядке ... он даже хорошо прокручивается.Но когда я добавляю элемент в тело (область центра / золота) с абсолютным позиционированием, положение определенного элемента ведет себя как будто фиксированное, а не абсолютное.В приведенном ниже коде я сделал это div 128x128 и раскрасил его # 00ffff (голубой).Разумный человек подумал бы, что div появится в верхнем левом углу основной области тела (золотая часть) ... однако flexbox, по-видимому, обрабатывает мое абсолютное позиционирование так, как если бы оно было позиционировано как FIXED.Приведенный ниже код - это все, что вам нужно для демонстрации этой проблемы.

Мне нужно решение, которое ведет себя как ожидалось. 

<body>
  <header>
    <h1>FLEXBOX LAYOUT PROOF OF CONCEPT</h1>
  </header>
  <div class="layout__body">
    <main class="layout__content">
        <div id="absolutepositioned">MESSED UP</div>
        <div style="color: #00FFFF;"><b>the blue box should be here</b>    </div>
    </main>
    <nav class="layout__nav layout__columns">
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>

    </nav>
    <aside class="layout__aside layout__columns">YOUR VIAGRA ADS HERE</aside>
  </div>
  <footer> FOOTER
  </footer>
</body>
<style>
  body {
    display: flex;
    flex-direction: column;
  }

  .layout__body {
    display: flex;
    flex: 1;
  }
  .layout__content {
    flex: 1;
    overflow: auto;
  }

  .layout__columns {
    flex: 0 0 12em;
  }
  .layout__nav {
    order: -1;
  }

  .layout__content {
    background: #3f3f00;
  }

  .layout__columns {
    background: green;
  }

  header, footer {
    background: #000;
    color: #fff;
    padding: 10px;
  }

  footer a {
    flex: 1;
  }

  h1 {
    margin: 0;
    font-size: 15px;
  }

  html,body {
    height: 100%;
    margin: 0;
    font-family: Helvetica;
  }

  #absolutepositioned
  {
      position: absolute;
      left: 0;
      top: 0;
      width: 128px;
      height: 128px;
      background-color: #00ffff;
  }
</style>

1 Ответ

0 голосов
/ 08 июня 2018

От MDN :

Абсолютно позиционированный элемент - это элемент, вычисленное значение позиции которого является абсолютным или фиксированным.Свойства top, right, bottom и left определяют смещения от краев содержащего элемента блока.( Содержащий блок является предком, относительно которого элемент расположен .) Если элемент имеет поля, они добавляются к смещению.

Вам необходимо добавить position: relative к предку, которому вы хотите расположить элемент относительно, в вашем случае, это .layout__content

body {
  display: flex;
  flex-direction: column;
}

.layout__body {
  display: flex;
  flex: 1;
}

.layout__content {
  flex: 1;
  overflow: auto;
  position: relative;
}

.layout__columns {
  flex: 0 0 12em;
}

.layout__nav {
  order: -1;
}

.layout__content {
  background: #3f3f00;
  position: relative;
}

.layout__columns {
  background: green;
}

header,
footer {
  background: #000;
  color: #fff;
  padding: 10px;
}

footer a {
  flex: 1;
}

h1 {
  margin: 0;
  font-size: 15px;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: Helvetica;
}

#absolutepositioned {
  position: absolute;
  left: 0;
  top: 0;
  width: 128px;
  height: 128px;
  background-color: #00ffff;
}
<header>
  <h1>FLEXBOX LAYOUT PROOF OF CONCEPT</h1>
</header>
<div class="layout__body">
  <main class="layout__content">
    <div id="absolutepositioned">FIXED!</div>
    <div style="color: #00FFFF;"><b>the blue box should be here</b> </div>
  </main>
  <nav class="layout__nav layout__columns">
    NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br>

  </nav>
  <aside class="layout__aside layout__columns">YOUR VIAGRA ADS HERE</aside>
</div>
<footer> FOOTER
</footer>
...