Jak ustawić jeden div pod drugim divem?

0

Cześć,
trzeci dzień próbuje ustawić jeden div pod drugim, gdzie obydwa zawierają obrazki z position:absolute.

Prosty przykład z niedziałającym kodem: https://jsfiddle.net/6H4RA/10/

#banner-left {
    position:absolute;
    width:100px;
    height:100px;
}

#header{
    position:relative;
    background: #ffa;
}

#footer {
            position:relative;
            margin-top:0px;
            width: 100%;
            background: #6cf;
}
<div id="header">
        Header
        <div id="banner-left">
            <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
        </div>   
</div>

<div id="footer">
    FOOTER
    <div id="banner-left">
        <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
    </div>
    <div id="banner-left" style="top:0px;left:100px;">
        <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
    </div> 

Trudnością dla mnie jest ustawienie div'ów zachowując absolutną pozycje obrazka w div'ie.
Otworzyłem ten sam temat na stack overflow, ale zapomniałem o tym napomknąć, więc tam już temat pewnie przepadł.
http://stackoverflow.com/questions/29828392/how-to-position-div-below-another-div-with-images/29840301#29840301

2

Dlaczego masz kilka kontenerów div z takim samym id?

0

Bo to szybki kod, który ma pokazać problem, nie chce dodatkowych 100 lini cssa, bo nikt nie będzie chciał na to spojrzeć.

--edit--
zmiana id na class rozwiązuje problem jak się okazuje. Chociaż nie w layoucie z którym walcze ;x

1

Bo to szybki kod

tyle, że to błędny kod (id może być tylko jedno, do takich rzeczy się używa klas CSS). I wcale nie taki szybki, skoro go piszesz trzeci dzień ;)

gdzie obydwa zawierają obrazki z position:absolute.

niestety jak się coś weźmie w position:absolutnie to ten element jakby "wychodzi z pojemnika" i nie jest to wliczane do jego wysokości. Możesz np. nadać wysokość pojemnikowi:
https://jsfiddle.net/6H4RA/14/
albo zamiast position:absolute zrobić position:relative. Albo w ogóle zrezygnować z tego i umieszczać elementy normalne. Albo popróbować z kontenerami flex...
w CSS z większością rzeczy trzeba kombinować po prostu.
EDIT:
albo umieć googlować: na Stackoverflow i na CSS Tricks zwykle są wszystkie odpowiedzi.

0

Może zapytam z innej strony. Mam ciężki layout wycięty w Photoshopie, który grafikę ustawia na absolute. Ciężko mi uwierzyć, że muszę przepisywać cały css wszystkich elementów, bo nie mogę ich pogrupować i nimi zarządzać. Tak jak LukeJL pisze, elementy absolute "wychodzą z pojemnika", jednak każdy tutorial pisze, że jeśli pojemnik jest :relative to z niego 'absoluty' nie wychodzą.
@LukeJL layout jest do aukcji allegro, który będzie obsługiwany przez laika, więc rozmiar zawartości będzie zmienny i nie mogę na sztywno ustalić wysokości. Nie chce też używać Flexów i dziwnych rzeczy bo parser allegro czasem coś zaakceptuje, czasem nie, wole nie ryzykować robienia czegoś od nowa.

Wychodzi na razie na to, że nie jest możliwe ustawienie obok siebie pionowo dwóch div'ów o zmiennych/nieokreślonych wymiarach, z elementami :absolute w środku(prowokacja).
https://jsfiddle.net/bnt8an2j/2/

1 użytkowników online, w tym zalogowanych: 0, gości: 1