2

Если position:absolute; вырывает блок из потока документа, то это значит, что свойства (например: justify-content:center;) заданные его родителю (укажем у родителя position:relative;) не будут работать на нем?

5
  • 2
    вы можете просто попробовать
    – Grundy
    7 фев 2016 в 18:12
  • Это да, я попробовал у меня не работает, просто может я ошибся где и здесь бы мне сказали что можно и показали верное решение 7 фев 2016 в 18:13
  • приведите ваш код, укажите что именно не работает, а так же ожидаемое поведение
    – Grundy
    7 фев 2016 в 18:14
  • codepen.io/Fess/pen/QyZXjd?editors=1100 Я понял что свойства флекс боксов не работают на position:absolute; но не подскажите как правильно в таком случии центрировать текст по горизонтали и вертикали?, мой вариант вот 8 фев 2016 в 11:38
  • 1
    Добавьте сам код в вопрос
    – Grundy
    8 фев 2016 в 11:40

1 ответ 1

1

Сделал вам пример внимательно посмотрите как это можно реализовать

Документация W3C на английском

4.1. Absolutely-Positioned Flex Children

Также ответил вам в вашем другом вопросе

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.content1,
.content2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
}
.content1 {
  background-color: #008000;
}
.content1 .block1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #000;
}
.content2 {
  background-color: #ffc0cb;
}
.content2 .absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content2 .absolute .block2 {
  width: 200px;
  height: 200px;
  background-color: #000;
}
<div class="content1">
  <div class="block1"></div>
</div>
<div class="content2">
  <div class="absolute">
    <div class="block2"></div>
  </div>
</div>

2
  • ru.stackoverflow.com/questions/490032/… ответ который вы дали тут меня полностью устроил, спасибо вам 8 фев 2016 в 18:04
  • Рад что помог, следующий раз старайтесь не дублировать вопрос и старайтесь полностью описать вопрос с примерами. 8 фев 2016 в 18:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.