Position: relative - podaljša stran

2 naročnika

Po daljšem času sem spet naredil spletno stran, ki verjetno ni narejena po vseh standardih: http://www.suzanasvent.eu/.

Stran ima sredinsko poravnan div z fiksnim ozadjem, klikajoči deli (obarvani deli slik, ko si z miško gor) pa so potem pozicionirani relativno na div. Pri tem se mi pojavi težava, da mi po nekaj teh relativno postavljenih slikah (position: relative) naslednja taka slika povzroči, da je moj max-height (ki je omejen, ker želim fiksnega, kot je fiksno ozadje) prekoračen in mi naredi drsnik na ta div (tudi če je njegova končna pozicija višje, je njegova navidezna pozicija izven predvidene širine strani).

Da sem zaobšel ta problem, sem potem zadnji dve hover sliki pozicioniral absolutno, kar pa se izkaže kot slabo, če gledaš stran pri spremenjenem zoomu ali na tablici.

Je kaka rešitev, da mi zaporedne slike z relativno pozicijo ne bi povečale div-a z drsnikom? Sem delal kaj mogoče narobe? Hvala!

Relativno postavljeni elementi ti prekoračijo height, ker jim nastaviš nek offset, še vedno pa spadajo v flow strani. Nasprotno bi ti element, pozicioniran absolutno, skočil ven iz flowa, in to je tisto, kar ti rabiš. Ampak, za pravilno nastavljanje absolute elementov je ponavadi potrebno dat "position: relative;" parent elementu, v tvojem primeru #main_index - tega ni nimaš in ti potem absolutno postavljen element poišče prvi parent z relative pozicijo, to je pa v tvojem primeru šele html tag, saj je po defaultu position: relative (kar sicer ni tehnično res, ampak dobro). In maš nato probleme pri resizanih straneh.

Torej, drž se position: absolute, pa preberi kaj o absolute vs. relative positioning na netu, zagotavljam, da boš imel več od tega kot pa od mojega jamranja tukej gor :)

Hvala Yakamashi. Točno to sem rabil. Samo position: relative sem dodal v parent div in spremenil koordinate in sedaj vse dela.
Malo sem brskal po netu glede positioning-a in na eni strani piše, da je to en od "aaaahhh" trenutkov v CSSu, ko ti mala sprememba spet postavi stvari na svoje mesto. Očitno nisem imel edini tega problema :)