Почему блок футер"влез" на секцию?

Question

[olya_097]

https://codepen.io/anon/pen/XGVxPy

Answer 1

[Andrew Garfield]

Вы позиционировали .contacts__text-block абсолютно и он "вылез" из потока, соответственно footer занял его место.

Comments

[olya_097]

Andrew Garfield, а как исправить?

[Andrew Garfield]

Флексами.

Answer 2

[Максим]

https://codepen.io/topicstarter/pen/eXyQRw - это конечно порнуха но вы скажите что нужно и для чего нужно использовать position в footer

Comments

[olya_097]

Максим Ленский, я использую потому что блок , который начинается с компания очень близок к правому краю
или я не права?

вот я прикрепила
и снизу "бугорки" как бы посоветовали сделать?

[Максим]

olya_097, какие бугорки ? на фотке не видно их или я не понимаю о чём речь ...но позиционирование не нужно здесь

[olya_097]

Максим Ленский, а как ? если не позиционированием тут?
под бугорками я подразумеваю самый низ

[Максим]

olya_097, ааа эти бугорки это типа здания ?

[olya_097]

Максим Ленский, ага

[Максим]

olya_097, ну так получается надо нам две вещи- перовое нарисовать в SVG эти здания и второе расположить в section два родительских блока но один фейковый а второй будет уже с О компании и третий это уже будет SVG с четырмя SVG слоями т.е эти здания

[olya_097]

Максим Ленский, ок
так а как тут сделать, если не позиционированием? не совсем понятно

[Максим]

olya_097, flexbox - выполнит эту задачку на ура ...а вот позиционировать уже svg контейнер если вы хотите ...то я могу у вас на компьютере это сделать ...скачайте teamviewer и установите не для коммерческой цели, в личном кабинете есть мой email и пароль и id напишите мне на почту, только программу не выключайте ...когда я подключусь к вашему компьютеру зададите все вопросы + я наглядно покажу как это сделать

[olya_097]

Максим Ленский, просто justify-content:flex-end и маргин?

[Максим]

olya_097, не flex-end а space-around скорее всего ...но надо эксперементировать ..я прошлый комментарий дополнил - прочитайте

[olya_097]

Максим Ленский, макет в иллюстраторе

[Максим]

olya_097, тем и удобнее ..тогда вот эти дома / здания сохранить по отдельности ...далее карту (я не знаю интерактивная или нет ) и по верх карты уже здания + контакты ...позиционирование не нужно ...по крайней мере не вижу этой задачи здесь именно для этого блока

[olya_097]

Максим Ленский, ну да
с иллюстратора ведь можно сразу в свг экспортировать

так а как выровнять? Вы не эксперементировали? просто я тут вижу только абсолют
пробовала флексами
но что-то не то

[Максим]

olya_097, это не сложно ..просто надо внимательно делать ... я очень часто экспериментирую

[olya_097]

Максим Ленский, подскажите, пожалуйста

[Максим]

olya_097, я же сказал где мой email и что сделать

[Максим]

olya_097, или хотя бы макет на поту мне пришлите

[olya_097]

Максим Ленский, отправила

[Максим]

olya_097, Оля зайдите в почту и ответьте мне

Answer 3

[Shinso]

Если ты имеешь ввиду что он выше блока "Компания" то все потому что он расположен с помощью position: absolute; а он не влияет на положение других элементов на странице

Comments

[olya_097]

Shinso, а как исправить?

[Shinso]

ну можно например наприсать

.contacts__text-block {
    background-color: #808080;
    width: 530px;
    height: 540px;
    margin: 0 0 0 auto;
}