pozicionálóelemekkel
Alapértelmezésben minden elem az oldalon sorba vannak rendezve:
- blokk elrendezett egymás alatt,
- kisbetűs elrendezett egymás után.
A CSS-ben lehetőség van, hogy ellenőrizzék a pozicionáló elemek, amelynek köszönhetően árthatnak a megállapított sorrendben a helyét, és helyezze a terméket a kívánt pozícióba az oldal.
Rangsor végzi az ingatlan helyzetét. Ez határozza meg a módját a pozicionálás és lehet alkalmazni az összes elemet.
Megkülönböztetése abszolút és relatív elhelyezése a elemek.
abszolút pozicionálás
Tulajdonságok abszolút pozíció értékét meghatározza az abszolút pozicionálás tagja.
Amikor az abszolút pozicionálás koordinátáit az új helyzetben az elem által meghatározott felső tulajdonságait. jobbra. alsó és bal:
- tekintetében a széleit a böngésző ablakot, ha a szülő elem nincs jelen, vagy ha ő pozícióját tulajdonság értéke statikus (ez az alapértelmezett beállítás).
- széleihez a szülő elem, ha tulajdon helyzetbe abszolút. fix vagy relatív.
A megkülönböztető jegye az abszolút helymeghatározás tag, hogy engedje el a teret korábban elfoglalt: kizárt terület által elfoglalt egy másik elem.
Ha az érték rögzített helyzet elemtulajdonságok is abszolút pozicionált. De ez az elem van rögzítve egy ponton megadott koordinátákat tulajdonságokkal tetején. jobbra. lefelé és balról. nem görgessen az oldal tartalmát.
Penguin található a bal oldalon a bekezdés - mert kell helyezni az alapértelmezett.
Szöveg átkerült a hely által korábban elfoglalt egy pingvin. A pingvin van rögzítve!
A példában egy pingvin a második bekezdésben van beállítva fix érték az ingatlan megadott helyen és koordinálja a felső és jobb kulcsszavakat.
Visszaszámlálás eredete a széleit a böngésző ablakot, mint a szülő elem (a bekezdés - a címke
) Helyzet van megadva, ezért tart az alapértelmezett statikus.
Így pingvin található, a parttól 300 pixel felső szélétől 220 pixel a jobb szélén a böngésző ablakot. És ő nem lép az adott oldal tartalma: Mindig látni az azonos helyhez kötött (lásd jobbra)..
relatív pozicionálás
Jelentés tulajdonságok relatív helyzete létrehozza relatív elhelyezése tagja.
Amikor a relatív elhelyezése koordinátái az új helyzetben az elem is be van állítva segítségével szigorúan tulajdonságait. jobbra. lefelé és balról.
De a koordinátákat, számítva a kezdeti helyzetét elem helyet. Ebben az esetben a korábban elfoglalt helyet, ő nem szabad, és ez a hely nem tud más elemeket.
Penguin található a bal oldalon a bekezdés - mert kell helyezni az alapértelmezett.
A szöveg nem tolódott a hely által korábban elfoglalt egy pingvin: úgy tűnt, hogy elhagyta őt!
A példában egy pingvin a második bekezdésben van beállítva relatív pozíciója érték az ingatlan és a koordináták megadott kulcsszavak alján. 10px és balra. 100px.
A visszaszámlálás folyik tekintetében a koordinátáit a kiindulási helyzet a pingvin helyen.
Rétegek CSS. Z koordináta
Hagyományosan mindegyik elem két koordináta (mivel van dolgunk, a sík) az X és Y, amely meghatározza annak helyzetét az oldalon.
A CSS-ben lehetőség van kérni a harmadik elem - a térbeli koordináta Z. így szimulálva egy harmadik dimenziót, és lehetővé teszi az elemek átfedik egymást.
Z-index felismeri ezt a lehetőséget: ez határozza meg a koordináta értéket Z. meghatározó réteg száma, amelyen az elem, és ezáltal beállítása egymásra helyezési sorrendjét az elemek egymásra
Tulajdonság értéke z-index lehet bármely pozitív egész szám vagy 0. A nagyobb érték a magasabb réteg Z. található képest a rétegek egy kisebb érték koordináta.
Például, a réteg számozott 3 közelebb van a felhasználó, mint a rétegek a számok 1 vagy 2 és a réteg nélkül, előre meghatározott, koordináta Z.
Alapértelmezett tulajdonságokat z-index van beállítva, hogy az automatikus vagy 0. az előtérben az az elem, amely a HTML forráskód az alábbiakban ismertetjük, valamint egyenlő értékeit tulajdonságai z-index.
Tulajdonság pozicionált elemek, azaz az elemek, amelyek meghatározzák a helyzet ingatlan értékét abszolút. fix vagy relatív.
Üdvözlet!
Üdvözlet!
Magyarázat például. Red „Hello” közelebb a felhasználó, mivel ez van beállítva, hogy nagyobb érték a z-index. egyenlő 2 Míg a kék „ABLAK” Z-index 1.