Полина Емельянова

Никак. С тем, что ты показываешь.

Если только без relative.
https://jsfiddle.net/webirus/kcbwafc5/

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

Элементарная сетка из блоков:
IE10+ => flexbox
IE9- => float + clearfix
IE9- и разная высота блоков в строке (картинка + 1-2 стоки текста под ней) => inline-block
в какой-то ситуации тут даже display: table будет иметь право на жизнь

"Прилипающее" при прокрутке меню:
position: fixed
position: absolute + js
position: sticky + js fallback

Кнопка с иконкой и текстом:
inline-block + vertical-align: middle для обоих элементов
position: absolute для иконки и padding для кнопки
display: flex для кнопки

Ну и т.д.

Учитесь решать конкретные задачи и искать для конкретных задач лучший способ.

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

Я требую от дизайнеров использовать сетку, за исключением каких-то хитрых промо. И в общем-то проблемы отсутствия сетки в макете не встречал уже давно.

Считаю, что БЭМ - как идея организации стилей, наименования и решения проблемы отсутствия неймспэйсов в css - лучшее, что есть на сегодняшний день. Да, css-модули это интересно, но их просто открыв в блокноте styles.css не реализуешь.

Получается следующая идея.

Есть структурные блоки. Например, в классическом варианте это будет шапка, контент и подвал, сайдбар и основной контент, любая другая внутренняя структура, собранная из колонок сетки.

Есть независимые блоки, которые помещаются в структурные и в идеале должны в независимости от того, куда их воткнули выглядеть и работать как нужно.

Это позволяет быстро разметить страницу и реализовать адаптив, а так же не изобретать классы вроде header-left, footer-right в каждом блоке.

Это собственно реализация того что сказал Symphony : jsfiddle

Ничего сложного нет.
Обычный список ul>li, выстраивается поверх всегда экрана.
Через абсолютное позиционирование сверху накладываются текстовые блоки.
Либо наоборот, список через абсолют.
Даже не знаю, как объяснить еще проще. Тут итак "школьная" программа.
Проще было набросать https://jsfiddle.net/webirus/p0af0my0/

На третьем экране, самый простой аккордион.
https://www.tn34.de/downloads/jQuery.tn34.facets.html
Демо 4 по-моему как раз выглядит похоже, только навигацию вниз перенести.

Например на странице с меню добавляешь блок
<div class="overlay"> </div>
Описываешь ему стили CSS

.overlay {
    position: fixed;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    display: none;
    z-index: 10;
}

И вот например при нажатии на какую-то кнопку

$(".openMenu").click(function () {
      $(".overlay").fadeToggle("slow");
});

Делайте отрицательный margin-top у блока, который имеет голубой фон.
Кроме того, сделайте position: relative для обоих блоков, и поставьте на первом z-index больше, чем на втором (чтобы они перекрывались правильно).

Пример: https://jsfiddle.net/dktzssxL/

Что за бредовые подсчеты знаний в процентном соотношении? Не занимайтесь ерундой, прекратите выдумывать эти мнимые значения - это невозможно подсчитать.
Пришли сюда за советом и помощи ищете? Постараюсь помочь:

1. Для начала, снизьте свои требования и ожидания от фриланса. Никто вам не будет платить и 2$/час на биржах. Вы не имеете опыта, не работаете с современными технологиями, нет портфолио, не умеете подстраиваться под других людей, и т.д.
   
2. Если что-то делаете - делайте нормально. Не нужно делать глупых умозаключений, что портфолио можно набить мусорными работами, найденными в интернете. Да, можно. А теперь спросите себя - нормально ли это? Если вы уже на старте пытаетесь сделать плохо? Тех, кто делает работу плохо предостаточно, а вот хороших, ответственных и грамотных специалистов - мало. Вторых хотят везде и спрос на них бесконечно велик. К кому хотите относиться?
   
3. Нарабатывайте портфолио. Не надо на начальных этапах гнаться за деньгами, на первых порах нужно набираться опыта, развивать навыки и очень много учиться. Делайте работу и просите, чтобы ее оплатили в таком размере, в каком заказчик посчитает нужным.
   
4. Верстать нужно много, не стоит лениться набирать код руками, даже если уже есть готовое решение и его можно скопировать. Лучше будете запоминать, быстрее соображать и научитесь быстро шлепать пальцами по клавиатуре.
   
5. Нужно много учиться, но при этом не распыляться. Я уже заметил, что вы с одного на другое перепрыгивать любите. То верстку, то программирование изучаете. Остановитесь на чем-то одном для начала, и когда будете чувствовать, что получается одно, то можно и другое будет начать.
   
6. Научитесь подстраиваться под других. Не надо думать, что вы самый классный и самый нужный - это не так. Вас легко заменить. Если вам говорят, что есть работа здесь и сейчас - соглашайтесь, это ваши перспективы и ваша возможность заработать. Если говорят, что готовы помочь прямо сейчас - ищите возможность получить ее, это нужно только вам, потом такой возможности может и не быть. Хотите развиваться как специалист - много работайте и научитесь лишать себя удовольствий. Если не научитесь - будете нытиком-ремесленником всю жизнь, который оправдания на все неудачи в ком-то ищет, а не в себе.
   

Ну и самое главный совет - забить на фриланс. Это рутина, от которой стремиться уйти любой нормальный человек. Фриланс - это работать 24 часа в сутки, самостоятельно дисциплинировать себя и формировать график индивидуально. Хотите расти и зарабатывать - ищите место, где вас примут в штат и будут готовы обучать.

это можно сделать нативно на CSS, без JS.
https://jsfiddle.net/dtd4r7yd/