Путаница при сочетании гибкости и абсолютного позиционирования

Question

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

В приведенном ниже примере кода я ожидаю увидеть «нижний» элемент div, расположенный над нижним колонтитулом, но на самом деле он находится внизу окна.Вот ссылка jsfiddle: http://jsfiddle.net/L809zbey/

HTML:

<div class="flex">
    <div class="header">Sweet header</div>
    <div class="content">Main content
        <div class="bottom">
          This guy should be fixed above the footer.
        </div>
    </div>

    <div class="footer">Equally sweet footer</div>
</div>

CSS:

.flex{
    border: 1px solid #ddd;
    font: 14px Arial;
    display: flex;
    flex-direction: column;
}

.header{
  background : #007AA2;
  flex: 0 0 auto;
}

.content{
  background : #FFF;
  flex: 1 1 auto;
  height: 200px;
}

.footer{
  background : #7FCADE;
  flex: 0 0 auto;
}

.bottom {
  position: absolute;
  bottom: 20px;
}

Answer 1

вы хотите добавить position: relative; к .flex.Вещи, которые позиционируются абсолютно, будут позиционироваться относительно ближайшего позиционированного предка.Если его нет, оно будет относительно тела

Answer 2

Вам не нужно позиционировать элемент абсолютно ... просто убедитесь, что он всегда находится внизу .content div.Таким образом, он никогда не будет перекрывать любое фактическое содержимое , которое он сделал бы, если бы имел абсолютную позицию.

Этого можно добиться, сделав .content div гибкой колонкой и применив margin-top:auto ваши инструменты div.

.flex {
  border: 1px solid #ddd;
  font: 14px Arial;
  display: flex;
  flex-direction: column;
}

.header {
  background: #007AA2;
  flex: 0 0 auto;
}

.content {
  background: pink;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.footer {
  background: #7FCADE;
  flex: 0 0 auto;
}

.bottom {
  margin-top: auto;
  background: orange;
}

<div class="flex">
  <div class="header">Sweet header</div>
  <div class="content">Main content
    <div class="bottom">
      This guy should be fixed above the footer.
    </div>
  </div>

  <div class="footer">Equally sweet footer</div>
</div>

Answer 3

Попробуйте добавить position:relative; к вашему .flex классу.Элемент .bottom в настоящее время относится к телу, поэтому он застрял в нижней части страницы.