Поведение позиции CSS Div

У меня проблемы с пониманием свойств позиции div (относительная, абсолютная, фиксированная). У меня в основном есть абсолютный div по центру. Внутри div должна быть возможность прокрутки по вертикали и горизонтали. Внутри этого div должен быть фиксированный заголовок с шириной больше, чем на экране (переполнение), и div содержимого, который также имеет переполнение по вертикали и горизонтали.

html,
body {
    height: 100%;
    width: 100%;
    background: #fff;
    margin: 0px auto;
    padding: 0px auto;
    position: fixed;
}

.container {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    top: 10px;
    left: 10px;
    background: #2924aa;
    overflow: scroll;
    display: flex;
    position: absolute;
    z-index: 20;
}

.container-header {
    width: calc(100%);
    height: calc(10%);
    background: #2924aa;
    overflow: visible;
    z-index: 10;
    position: fixed;
    background: red;
}

.container-body {
    width: calc(110%);
    height: calc(110%);
    background: #2924aa;
    overflow: auto;
    position: absolute;
    background: green;
}
  <div class="container">
      
    <div class="container-header"></div>
      
    <div class="container-body"></div>
      
  </div>

Вот мой плункер: https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy


css css-position absolute fixed
person Philipp Heider    schedule 20.05.2016    source источник
comment
Ваш основной контейнер должен иметь position: relative;, иначе .continer-body рассчитывается относительно экрана вашего браузера. Fixed всегда рассчитывается относительно экрана.   -  person Yasin Yaqoobi    schedule 20.05.2016

Ответы (1)


arrow_upward
0
arrow_downward

Итак, я думаю, что главный вопрос, который у вас есть, касается атрибута позиции в CSS3. Ниже приведен краткий обзор каждого возможного значения.

Позиционирование CSS
Атрибут позиционирования CSS имеет четыре разных значения.
Статическое. Статическое значение по умолчанию для позиции. Он удерживает элемент на странице на своем месте и прокручивает страницу вверх по мере прокрутки.
Относительное. Относительное позиционирование во многом похоже на статическое; однако вы можете использовать атрибуты left, right, top и bottom, чтобы изменить положение элемента. относительно своего исходного положения.
Фиксированное — фиксированное положение элемента определяется по отношению к области просмотра (т. е. браузеру), поэтому элемент с фиксированным положением не скроллить вместе со страницей, потому что при скролле вьюпорт не меняется. Однако если вы измените размер окна браузера, положение элемента изменится.
Абсолютное. Элемент с абсолютной позицией позиционируется относительно своего родительского элемента (то есть элемента, который его содержит).

Хороший ресурс для получения дополнительной информации, включая некоторые диаграммы, можно найти здесь.

person zerøSigma    schedule 20.05.2016