Nie parametru a, tylko:
- znacznika
<a> lub </a> (ang. tag) – jeśli masz na myśli tylko <a> lub tylko </a> (https://developer.mozilla.org/en-US/docs/Glossary/Tag);
- elementu
<a> (ang. element) – jeśli masz na myśli element HTML <a>linkNieWiadomoDoCzego</a> (znacznik otwierający, treść, znacznik zamykający; https://developer.mozilla.org/en-US/docs/Glossary/Element);
- węzła
<a> (ang. node), jeśli masz na myśli węzeł <a>linkNieWiadomoDoCzego</a> w modelu DOM (https://developer.mozilla.org/pl/docs/DOM oraz https://developer.mozilla.org/en-US/docs/Glossary/Node/DOM).
A dlaczego elementy <a> nie dopasowują się do elementu, który ma position: fixed?
Najpierw zakomentuj wszystkie display: float; i zobacz, jak będzie to wyglądać. Elementy <a> "wchodzą" teraz na element <div id="logo">. Właściwie "wchodzi" ich padding – dlaczego? Ponieważ elementy <a> są elementami śródliniowymi (===mają display: inline), więc dodanie im padding nic nie zmienia w ich położeniu – nadal są umieszczone w tej samej jednej linii i w tej samej wysokości od poprzedniej linii (w której jest element z id="logo"). Przy okazji: na wysokość linii może wpłynąć m.in. wartość parametru własności line-height, ale to teraz nieważne.
Nie chcemy jednak, żeby te elementy były tak umieszczone – chcemy, by były w jednej linii razem z logo. Dajmy więc elementom <a> wartość float: left;. Hm, ciekawa sprawa – nadal są pod logo, ale teraz już nie wchodzą na nie! Dlaczego? Ponieważ po dodaniu float: left; zostały "wyjęte" z normalnego układu elementów na stronie, dzięki czemu wszystkie inne elementy opływają je po prawej stronie. Ale które wszystkie? Ano, u nas jeden: <div class="menu_links">. Spróbuj zrobić zresztą tak:
Kopiuj
<div class="menu_links">
<a href="">Home</a>b
<a href="">Gallery</a>c
<a href="">About</a>d
</div>e
Zobaczysz, że litery "b", "c" oraz "d" są umieszczone za wszystkimi elementami <a>, ponieważ poleciał tam <div>, który je opakowuje (to, że opakowuje także elementy <a>, nie ma znaczenia przy floatach). Ale litera "e" nie jest z nimi w jednej linii – znajduje się już za tym elementem <div>, więc siedzi pod nim (bo tak działają elementy blokowe, <div> jest domyślnie elementem blokowym). I zarówno <div>, jak i litera "e" opływają wszystkie elementy <a>.
No dobrze, ale nadal chcemy mieć te linki w jednej linii z logo. Spróbujmy więc dodać float: left; do elementu <div id="logo"> (już bez tych liter "b", "c", "d" i "e"). Co się dzieje? No nareszcie ładnie to wygląda, wszystko w jednej linii. :)
Ale... zaraz, zaraz! Czyżby element <div class="menu_links"> nie potrzebował ustawienia własności float? Zobaczymy, jak on w ogóle wygląda: dajmy mu kolor background-color: yellow;. I... nic. Pusto! Gdzież on jest? Ano, nie została dla niego ustawiona własność float, więc myśli, że nie ma w nim żadnej treści, czyli żadnego elementu <a> (on jest w zwykłym układzie elementów, a floaty są w swoim). I ma zerową wysokość... (możesz dodać mu jakąś wysokość, np. height: 100px;, żeby zobaczyć, że nie został wciągnięty przez czarną dziurę i że nadal zawiera elementy <a>). A jakbyśmy i jego spróbowali wcisnąć do tego układu floatów? Nadajmy mu tę samą wartość float: left;... Voila! Linki są żółte, tak jak ten element (bo same nie mają żadnego tła). I nic z tego żółtego koloru nie wychodzi poza obręb czerwonych ramek – co oznacza, że <div class="menu_links"> ładnie opakowuje nam teraz wszystkie elementy <a>.
Ale bądźmy wredni. Odechciało nam się, żeby elementy <a> były float. Niech wszystkie inne będą, które ustawiliśmy, ale nie <a>. Usuńmy więc im własność float... i co? Podniosły się do góry! Dlaczego? Ponieważ usuwając je z układu float, przywróciliśmy je do zwykłego układu elementów na stronie. A przeglądarka uznała, że elementy te będąc w zwykłym układzie mają opływać wszystkie możliwe elementy float na stronie (bo tak zawsze działa float). Możliwe, czyli te, które mają jakąkolwiek zawartość – u nas tylko <div id="logo">. A więc u nas opływają sobie napis "Bartuś", a dokładnie cały element <div id="logo"> (czyli element z zawartością tekstową). Jeszcze jednak sprawa: co z żółtym tłem, że się skurczyło? Ano, elementy <a> nadal są śródliniowe, więc teraz element <div>, który je zawiera, sięga swoimi granicami tylko do wysokości linii (line-height).
Mam nadzieję, że z powyższego jakoś wynika, że wartość position: fixed; nie ma tutaj związku z wartością float: left;. :)
Jakby coś było niejasne, pytaj.
UPDATE: Powiem szczerze, w tym, co napisałem wyżej, jedna rzecz jest dla mnie niejasna: dlaczego przy ustawionej własności float padding jest liczony, a przy nieustawionej nie jest. Jeśli nie zapomnę, poszukam w wolnym czasie.
UPDATE 2: Na razie znalazłem jedynie potwierdzenie tego zachowania na przykładzie: http://maxdesign.com.au/articles/inline/
UPDATE 3: Chyba mam wyjaśnienie. Nie jest najlepsze, ale... https://teamtreehouse.com/community/why-does-margin-top-and-bottom-does-not-effect-inline-element Chodzi o to, że padding elementów śródliniowych nie ma wpływu na treść dookoła nich dlatego, że nie może mieć – inaczej rozbijałoby to przepływ treści ("flow of content"). Jednak jeśli te elementy są już float, to już nie ma czego rozbić – ponieważ i tak są w innym układzie (w innym flow), niż elementy nie-float, niż układ zwykły – i dlatego można uznać, że ich padding wpływa na treść dookoła. Tak przynajmniej zrozumiałem z odpowiedzi na stronie, do której prowadzi podany link.
UPDATE 4: No! Nie pomyl flow oraz float! ;)
UPDATE 5: Tu jeszcze ciekawa lektura: https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model
UPDATE 6: Poprawiłem "parametru" na "własności".
CSS 