Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: 622015]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 287837

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [48914]
2. CSS
A pozícionálás, és a z-index [25821]
3. CSS
Függőleges menü, legördülő almenüvel [20241]
4. CSS
Függőleges menü készítése listából [20024]
5. CSS
Bevezetés a CSS alapjaiba [19220]
 

 

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

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-05-28 16:31:56
Lektorálta: Wicky
Lektorálva:
2005-07-11 11:48:17 [25821]

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:
<div id="box_1">
   <p>
      1.
   </p>
</div>

<div id="box_2">
   <p>
       2.
   </p>
</div>

<div id="box_3">
   <p>
      3.  
   </p>
</div>

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.
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!