У верхнего блока position: fixed и top меняется по onscroll в 2 раза мленнее, чем scrollTop. У основного контента z-index больше, по этому он "наезжает" на шапку
Потому что float - это плавающий элемент, не влияющий на родителя. В исправленном варианте (поставил зеленый цвет для наглядности) после плавающих блоков стоит
background-color: rgba(0,0,0,.55);
Первые три цифры от 0 до 255, последняя - число от 0 до 1. Прозрачность 55% в примере.
---------------------------
Как вариант - сделать блок и вложенные элементы прозрачными: opacity: .55;
Прозрачность также целое число от 0 до 1.
Просто в макете color picker юзай на нужный элемент с цветом и все. А прозрачные цвета можно только через rgba() делать, больше ничего. Ну или весь блок через opacity, как сказано выше.