0

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

Собственно задача состоит в том, чтоб некий текстовый блок в коде страницы отображался сверху, а физически на сайте он присутствовал снизу. Я понимаю что можно это сделать отступами при абсолютном позицианирование, но мне почему то кажется что это не верный вариант. Может кто-то сталкивался с подобным и для чего это вообще хотят делать?

6
  • .footer { flex: 0 0 auto; }
    – Sublihim
    2 фев 2017 в 12:27
  • я знаю одно применение. Люди с ограниченными возможностями также используют интернет. Текст на странице они могут и не смочь прочитать (к примеру, плохое зрение) и они используют специальные читалки, которые читают текст с экрана. Так вот они будут текст зачитывать подобный, а обычные пользователи скорее всего его никогда и не увидят.
    – KoVadim
    2 фев 2017 в 12:31
  • @KoVadim Для людей с ограниченными возможностями разработан стандарт Accessible Rich Internet Applications (WAI-ARIA) w3.org/TR/wai-aria/roles
    – nikant25
    2 фев 2017 в 14:23
  • Подобное реализовано в jQueryMobile как поп-ап view.jquerymobile.com/master/demos/popup , с целью экономии места для моб. устройства.
    – nikant25
    2 фев 2017 в 14:26
  • @nikant25 я в курсе всего этого. Но некоторые разработчики пытаются их перехитрить.
    – KoVadim
    2 фев 2017 в 14:39

1 ответ 1

1

Для данной задачи лучше использовать возможности флексбокса, в частности CSS-свойство order. Вот пример разметки:

.flex {
  display: flex;
  flex-direction: column;
}
.flex p {
  background-color: #ccc;
}
.first {
  order: -1;
}
<div class="flex">
  <div class="second">
    <p>Второй блок.</p>
  </div>
  <div class="first">
    <p>Первый блок.</p>
  </div>
</div>
В примере контейнеру задается свойство display:flex. Чтобы дочерние блоки шли вертикально, добавляется свойство flex-direction:column. А чтобы блоки с текстом выстроились в нужном порядке, используется свойство order.

Ваш ответ

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

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