Pretor DH

Попытаюсь объяснить своими словами.

Поток набор элементов соотносящихся между собой как соседи имеющие общее начало координат, при этом элементы дети наследуют поток. Где каждый блок имеет свое последовательно зарезервированное пространство.
Резервирование пространства под блок тоже имеет свою логику и задается в display.

Смотим пример: JSFiddle

• float не отделяет блок от потока, смещает в край и минимизирует резервированное пространство для блока и применяет размеры. "Дети" остаются в старом потоке (Float child имеет ширину и начало координат от прародителя). Float удобен для набора блоков в стаки - так как край берется с учетом резервированных пространств, и флоат блоки не перекрываются. aside - можно(но не всегда) делать через ;
  
• relative блок не отделяется от родительского потока, а только корректирует свою координату и применяет размеры, пространство выделенное для блока остается. "Дети" получают новый внутренний поток. Используй для корректировки позиции блока. Создавай новые потоки для детей, без изменений для самого блока;
  
• absolute используется чтобы явно создать в родительском потоке, новый поток равный родительскому - с началом координат родительского. Пространство в родительском потоке не выделяется. "Дети" получают новый внутренний поток. В основном используется для всяких "дополняшек" привязаных к блоку. aside в большинстве случаев делаются им.;
  
• fixed используется чтобы создать независимый поток который позиционируется относительно окна. Fixed удобно делать header видимый всегда при прокрутке страницы.;
  

Все остальное это - Static.

Подобьем итог
header, footer - static или fixed (в редких случаях absolute);
content - принято оставлять statiс. Пусть контент лежит в основном потоке;
aside - absolute или на крайняк float;
Всякие изыски modal, action (типа хрестика на закрытие модального) - absolute;

P.S. Но как всегда есть исключения и нужно думать своей головой. Или если мозг не настроен думать пользоваться шаблонами.
P.P.S. Ксати есть flex - штука очень хорошая для тех кто думает своей головой. Ибо енто мутант со тремя головами и двенадцатью глазищами... ;)

Как на меня, то для учебы лучше использовать SketchUp, он самый простой с точки зрения освоения. И он имеет и продвигает фичи настоящих CADов которые приучат к акуратности и точности в моделировании. Человек поломавший себя 3дМаксом в плане "лепить как лепится" очень долго будет не понимать основ.

Так что!
Основными являются не программы, а навыки моделирования. Изучение сложных програм - начинайте тогда когда будете понимать, ЧТО нужно и для ЧЕГО нужно (в какой последовательности делать). А вот КАК это уже вопрос второстепенный. Понимая это, вам будет пофиг в какой программе делать - хоть как в допотопном CADе руками команды в консоль писать.

В первую очередь прокачайте навык моделирования.

var user = { "name": "Вася", "age": 35, "isAdmin": false, "friends": [0,1,2,3] };
var friends = [{ "thelocation" : "москва", "":""},{ "thelocation" : "london", "":""}];
    friends[0].thelocation //moskwa
    friends[1]['thelocation'] //london

Насколько я понял из приведенного задания, нам надо выполнить две задачи:

1. Убрать Header если был активирован якорь;
   
2. Если крутнули колесо или двинули скролл показать хеадер;
   
3. Бонусная фишка: по прошествию 3сек времени после (2) пункта автоматически запустить (1)
   

(function(){
  var self= this;
  self.onHideHeader = function() {
    $('#header').addClass('hidden');  //(1)
  };
  self.onShowHeader = function() {
    $('#header').removeClass('hidden');    //(2)
    setTimeout(self.onHideHeader,3000);  //(3)
  };
  $(window).on({'hashchange':this.onHideHeader,'scroll':this.onShowHeader});
})();

ДОПОЛНЕНО:
https://jsfiddle.net/s3qcLws7/
P.S. Тебе помощь нужна или исполнитель?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox="0 0 15 169" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="shape">
	     <polygon points="3,84 7,76 4,84 7,92 "/>
        </symbol>
        <polygon points="3,84 7,76 4,84 7,92 "/>

        <symbol id="shapeRed">
                  <use xlink:href="#shape" fill="red"/>
        </symbol>

        <symbol id="shapeGreen">
                  <use xlink:href="#shape" fill="green"/>
        </symbol>        
</svg>

в CSS файл подключать

.arrow {background:url(icon.svg#shapeGreen);}
.arrow:hover {background:url(icon.svg#shapeRed);}

И через яваскрипт менять svg, на закодированный в base64 xlink на symbol:

atb = document.styleSheets[__найти номер стайлшита__].cssRules[__найти номер привила__].style.backgroundImage;
atb = atb.replace('url(,','').replace(/\)$/,'');
atb = window.btoa('<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 15 169"      version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink">	<use xlink:href='+abt+'/></svg>');
document.styleSheets[__номер стайлшита__].cssRules[__номер привила__].style.backgroundImage = atb;

$( function(){
  $('body').on('click','a[ui-sref]',function(e){          /* прехватываем событие и делигируем его для всех (существующих и/или еще не созданых a[ui-sref])*/
     if (this['ng-click']) {      /* проверяем ваше условие */
         /* сделайте все чо вам нужно */
         e.preventDefault();    /* Здесь запретим обрабатывать события броузеру */
     } else return;    /* иначе ссылка сработает */
   });
});

"Красивые стили" получаются только руками в чистом CSS.
От вложености в вашем случае только хуже.
Посмотрите на CSS в браузере после обработки - там настоящий жестяный УЖОС... Там куча длинных селеторов которые бы вы руками писать не стали.

section.bullets table tr td.date span.title {    /* должен быть селектор .bullets .date .title */
  font-size: 12px;
  text-transform: uppercase;
  color: #777;
  font-weight: normal;
  display: block;
}
section.bullets table tr td.date span {      /* как максимум .bullets .date span */
  font-family: gotham;
  font-size: 16px;
  color: #777;
  font-weight: 600;
  display: block;
}
section.bullets table tr td.fav {      /* максимум селектор .bullets .fav */
  padding-right: 40px;
}
section.bullets table tr td.fav a.btn {        /* .bullets .fav .btn */
  text-decoration: none;
  padding-top: 8px;
  -webkit-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}
section.bullets table tr td.fav a.btn:hover {    /* .bullets .fav .btn:hover */
  color: #5824dc;
  border-color: #5824dc;
  -webkit-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}

Хотите красиво - пишите на чистом CSS.
Хотите быстро писать - пишите на SASS
Но в общем случее ЭТО будет и не так!!! Нужно чётко понимать что будет после разворачивания.

Вроде есть частичное решение для Android и старых Лис:

white-space: {nowrap | normal - вместо wrap};

Не будет работать опция wrap-reverse (но она и не нужна в наших реалиях).

(function(item) {
      var mem_scroll_top=0,
            coof_scroll = 1.2; /* больше 1 быстрее, меньше 1 медленнее */
       onMyScroll = function () {
              var sTop = ($(item).scrollTop() - mem_scroll) * coof_scroll;
                    $(item).scrollTop(mem_scroll=sTop);
              
       }
       $(item).on('scroll',onMyScroll);
})('.paralax');

//...  Ошибка здесь у вас -> только 1 результат
  WHERE pid = "'.$rowS['id'].'" AND vis = 1 ORDER BY RAND() LIMIT 1'    // <- limit 3 будет правильно
 //...
  $i = 0; //...это можно убрать оно лишнее
//...
  while ($rowQ = mysql_fetch_assoc($q) ) 
//...
  $i ++; //.. это можно убрать для красоты кода
//...
  if ($i > 3) break; // ... убрать для красоты кода