<? print $_ASWC_['NAME'];?> - Tanulj, vagy taníts te is on-line!

<- Előző :: Nyomtatási nézet :: Üzenet az írónak :: Köv. ->

Az absolute pozícionálás, és a z-index

A z-index tanulmányozásához, és a pozícionáláshoz szükségünk lesz három DIV-re, illetve az ezekhez tartozó CSS-re.
A HTML kód:

A tartalmuk természetesen bármi lehet, az egyszerűség kedvéért számokkal jelölöm őket.
Formázzuk meg a DIV-eket.

#box_1{
      background-color: #A6CAF0;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
}

#box_2{
      background-color: orange;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
}

#box_3{
      background-color: #E0E0E0;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
}

Nézd meg !
1. Vegyük észre, hogy pozícionálás nélkül, a dobozok olyan sorrendben jelennek meg, amiyen sorrendben azokat megadtuk. Nem fedik egymást, szépen egymás alatt helyezkednek el. De mi történik akkor, ha pozícionáljuk őket?

#box_1{
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: #A6CAF0;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
}

#box_2{
      position: absolute;
      top: 25px;
      left: 10px;
      background-color: orange;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
}

#box_3{
      position: absolute;
      top: 50px;
      left: 20px;
      background-color: #E0E0E0;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
}

2. Ebben az esetben a position: absolute. Tehát a dobozok pontos helyét mi a adjuk meg, a böngésző széleítől számítva.
Az eredmény lépcsőszerű elhelyezkedés. Itt, amelyik dobozt a legkésőbb adtuk meg, az került legfelülre. Próbáljuk ki, mi történik akkor, ha z-index tulajdonságot adunk neki.

#box_3{
      position: absolute;
      top: 50px;
      left: 20px;
      background-color: #E0E0E0;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
      z-index: 0; /* értéke minnél nagyobb, annál feljebb kerül */
}

3. Itt csak a box_3 DIV-nek adtunk z-index-et. Nem történt semmi. Miért?
Minden doboznak alapbeállítás szerint z-indexe: 0; a forrás fogja megszabni, hogy helyezkednek el. Tehát hiába adtunk e doboz z-indexének 0 értéket, nem történt semmi, mert a többi DIV z-index értékével megegyező. Most adjunk a többi doboznak 0-tól nagyobb értéket.

#box_1{
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: #A6CAF0;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
      z-index: 1;
}

#box_2{
      position: absolute;
      top: 25px;
      left: 10px;
      background-color: orange;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
      z-index: 1;
}

#box_3{
      position: absolute;
      top: 50px;
      left: 20px;
      background-color: #E0E0E0;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
      z-index: 0;
}

4. A 0 z-index-el rendelkező DIV került legalulra, a többi pedig ez fölé.
De nézzük csak meg jobban. A másik két doboz még mindig megadási sorrendben jelenik meg. Adjunk a box_1 DIV-nek z-index: 2 értéket.

#box_1{
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: #A6CAF0;
      border: solid 1px #FF0000;
      width: 50px;
      height: 50px;
      z-index: 2;
}

5. Láthatjuk, hogy a példa elején fennáló sorrend teljesen megváltozott, pontosan az ellenkezője lett annak.
A fentiek függvényében kijelenthetjük, hogy minnél nagyobb a z-index értéke, annál "magasabban" helyezkedik el a megadott DIV.

A fix illetve relative pozícionálás

Az első teendő, hogy megcsináljuk a HTML részt. Induljunk ki két DIV-ből, amit töltsünk fel némi tartalommal.

<div id="fix">
   <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed      do eiusmod tempor...
   </p>
</div>

<div id="content">
   <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...
   </p>
</div>

Attól függően hogy mi a z-index értéke, az első (fixált) DIV alatt, illetve fölött fog mozogni a második.
A CSS:

#fix{
      position: fixed;
      top: 0px;
      background-color: #A6CAF0;
      width: 100%;
      height: 200px;
}

#content{
      position: relative;
      margin-left: auto;
      margin-right: auto;
      top: 215px;
      left: 0px;
      background-color: orange;
      width: 300px;
      height: 1000px;
}

Nézd meg!
1. A position: fixed beállítással a DIV (Internet Explorer nem támogatja) a magadott helyen fog maradni. Tehát görgetéskor nem mozdul el a tartalommal.
A másik még eddig nem tárgyalt beállítás a width: 100%. Ez a böngésző teljes szélességébe "kihúzza" a réteget.
Tekintsük át a második DIV tulajdonságait.
Ezt relative pozícionálással középreigazítottam, és hogy ne takarja a felette levő dobozt, 215 pixellel lejjeb toltam. Ha adnék neki például left: 20px értéket, a relativ pozícionálásra jellemzően, nem a böngésző oldalától számolná, hanem a megadott helyétől, tehát ez esetben középről.
Próbáljuk ki a fentiek eredményét!
Látjuk, hogy a content nevű doboz a fixált fölött gördül el.
Próbáljuk "alácsúsztatni" :

#fix{
      z-index: 1;
      position: fixed;
      top: 0px;
      background-color: #A6CAF0;
      width: 100%;
      height: 200px;
}

#content{
      z-index: 0;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      top: 215px;
      left: 0px;
      background-color: orange;
      width: 300px;
      height: 1000px;
}

2. Ez esetben a második, narancssárga doboz a position: fixed beállítással rendelkező DIV alatt fog mozoni.
Miért is?
A fix nevű doboz z-index-e 1, a content dobozé pedig 0, így a nagyobb z-indexel rendelkező kék DIV a kisebbel rendelkező alá fog kerülni.

Témaköreink

DumAblak

On-line

Statisztika

CSS -> A pozícionálás, és a z-index

Az absolute pozícionálás, és a z-index

A fix illetve relative pozícionálás

Hello Vendég