Odpowiadam, bo moja reputacja nie wystarczy do komentarza. Ale nie traktuj tego jako odpowiedzi, tylko dodatkowe informacje, jak ja, miałem pewne problemy zarówno ze stopką, jak i pozycją.
Podczas konfigurowania strony tak, aby moja stopka zawsze znajdowała się na dole, z pozycją bezwzględną, a główny kontener / opakowanie z pozycją względną.
Następnie znalazłem pewne problemy z zawartością tekstu i menu w tej samej treści (biała część strony między nagłówkiem a stopką), po ustawieniu ich na wartość bezwzględną stopka nie pozostaje już opuszczona.
Postycjonowanie to, jak mówisz, złożony temat.
Moim rozwiązaniem, aby treść, którą chciałem w pozycji `` absolutnej '' na mojej stronie internetowej, i nie był zepchnięty na bok, gdy w przykładzie otwierając menu rozwijane, było faktycznie nadanie jej pozycji względnej i umieszczenie jej 35em poniżej mojego rozwijanego menu menu. (35em to wysokość mojego menu rozwijanego, gdy jest w pełni rozwinięte)
Następnie u góry: -35em, za treść, która wcześniej była wypychana na bok. A potem dodanie margin-bottom: -35em. W ten sposób zawartość znajduje się „pod” moim menu rozwijanym, ale wizualnie jest obok mojego menu rozwijanego! A biała przestrzeń poniżej do stopki ma tylko 10em marginesu, tak jak to było przed rozpoczęciem zabawy. Więc moje rozwiązanie było takie:
html, body {
margin:0;
padding:0;
height:100%;
}
h1 {
margin:0;
}
#webpage {
position:relative;
min-height:100%;
margin:0;
overflow:auto;
}
#header {
height:5em;
width:100%;
padding:0;
margin:0;
}
#text {
position:relative;
margin-bottom:-32em;
padding-top:2em;
padding-right:2em;
padding-bottom:10em;
background-repeat:no-repeat;
width:70%;
padding-left:auto;
margin-left:auto;
margin-right:auto;
right:10em;
float:right;
top:-32em;
}
#dropdown {
position:absolute;
left:0;
width:20%;
clear:both;
display:block;
position:relative;
top:1em;
height:35em;
}
#footer {
position:absolute;
width:100%;
right:0;
bottom:0;
height:5em;
margin:0;
margin-top:5em;
}
Widzę, że odpowiedź na twoje pytanie jest dobra, ale po wielu kłopotach stwierdziłem, że jest to bardzo dobre rozwiązanie i sposób na lepsze zrozumienie, jak działa pozycjonowanie. Kiedy umieszczam treść tekstu, poniżej mojego rozwijanego menu, nie. t przesunąć mój tekst na bok. Jeśli zmieniłem tekst na pozycję bezwzględną, stopka nie pozostała na miejscu. Ponieważ mogę wierzyć, że jest to problem dla większej liczby osób niż ja, dodam to tutaj. Co się właściwie dzieje, umieszczam tekst, 35 ems, poniżej listy rozwijanej.
Następnie wizualnie stawiam obok siebie, z pozycją względną i górą: -35em; i wyrównuję ogromną przestrzeń poniżej, z marginesem: -35em;
wartości ujemne są czasami niedoceniane, bardzo dobra funkcjonalność, gdy lepiej zrozumie się te pozycje!
Naturalnie stała pozycja również wydawała się logiczna dla mojej stopki, ale naprawdę chcę, aby stopka znajdowała się poniżej widoku, jeśli tekst lub zawartość są dłuższe niż obszar roboczy. I pozostać na dole, jeśli na stronie jest mało treści.
Ten setupp naprawił to bardzo ładnie i pamiętaj, aby użyć 'em', a nie 'px', aby uzyskać bardziej płynny / dynamiczny układ strony! :)
(mogą być lepsze rozwiązania, ale to działa dla mnie na różnych platformach, a także na urządzeniach).
