8. fejezet: Pozicionálási tulajdonságok

• bottom: Megadja az objektum alsó szélét a következő pozicionálási műveletnek.
  Paraméterek: auto (alapértelmezett; a HTML-összeállításától függő helyi érték), hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { bottom : paraméter }
  Scriptben: objectum.style.bottom [ = paraméter ]
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530745%28v=VS.85%29.aspx)

  <DIV STYLE = "position:absolute; bottom:50px">valami </DIV>

• clip: Megadja vagy beállítja, hogy az objektum melyik része legyen látható. Csak Internet Explorer 8 és utána! Paraméterek: auto (alapértelmezett), rect(felső, jobb, alsó, bal)
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms533569%28v=VS.85%29.aspx)

  <DIV STYLE="position:absolute;top:0;left:100; clip:rect(15px, auto, auto, auto)"><IMG SRC="akarmikep.jpg"/></DIV>

• display: Beállítja, hogy melyik objektum legyen látható.
  További ötletek és beállítások: http://msdn.microsoft.com/en-us/library/ms533736%28v=VS.85%29.aspx

• top: Megadja vagy beállítja az objektum felső szélét a következő pozicionálási művelethez.
  Paraméterek: auto (alapértelmezett; a HTML-összeállításától függő helyi érték), hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { top : paraméter }
  Scriptben: objectum.style.top [ = paraméter ]
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms531177%28v=VS.85%29.aspx)

  <IMG SRC="akarmikep.jpg" STYLE="position:absolute;    top:80px;" onmouseover="this.style.top='100px''"     onmouseout="this.style.top='80px'" >

• left: Megadja az egyes elem bal oldali elhelyezkedését a dokumentum-hierarchiában.
  Paraméterek: auto (alapértelmezett), hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { left : paraméter }
  Scriptben: objectum.style.left [ = paraméter ]
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms530778%28v=VS.85%29.aspx)

  <BUTTON onclick="cone.style.left='100px'; sphere.style.left='200px'">akarmi</BUTTON>

• right: Megadja az egyes elem jobb oldali elhelyezkedését a dokumentum-hierarchiában.
  Paraméterek: auto (alapértelmezett), hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { right : paraméter }
  Scriptben: objectum.style.right [ = paraméter ]

  További beállítások: http://msdn.microsoft.com/en-us/library/ms531149%28v=VS.85%29.aspx

• height: Megadja az egyes elem magasságát.
  Paraméterek: auto (alapértelmezett), hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { height : paraméter }
  Scriptben: objectum.style.height [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms530765%28v=VS.85%29.aspx

• width: Megadja az egyes elem szélességét.
  Paraméterek: auto (alapértelmezett), hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { width : paraméter }
  Scriptben: objectum.style.width [ = paraméter ]
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms531183%28v=VS.85%29.aspx)

  <IMG SRC="akarmikep.jpg" onclick="this.style.width='1cm'" ondblclick="this.style.width=''">

• clip: Az egyes elemek részeinek összekapcsolását, illetve levágását határozza meg.
  Paraméterei: auto vagy téglalap leírása "rect(top right bottom left)" formátum sorrendben.
  HTML-minta: { clip : paraméter }
  Scriptben: objectum.style.clip [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms530748%28v=VS.85%29.aspx

• min-height: Megadja a cellaelem minimális szélességét. Fontos! Csak pár elemnél használható!
  Paraméter: hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { min-height : paraméter }
  Scriptben: objectum.style.minHeight [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms530815%28v=VS.85%29.aspx

• min-width: Megadja a cellaelem minimális szélességét. Fontos! Csak pár elemnél használható!
  Paraméter: hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { min-width : paraméter }
  Scriptben: objectum.style.minWidth [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms530820%28v=VS.85%29.aspx

• max-height: Megadja a cellaelem maximális szélességét. Fontos! Csak pár elemnél használható!
  Paraméter: hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { max-height : paraméter }
  Scriptben: objectum.style.maxHeight [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms530809%28v=VS.85%29.aspx

• max-width: Megadja a cellaelem maximális szélességét. Fontos! Csak pár elemnél használható!
  Paraméter: hosszúság-egység (Minták: http://tferi.hu/html-konyv/css-mertektablazat), százalék_érték (egész szám, melyet %-jel követ).
  HTML-minta: { max-width : paraméter }
  Scriptben: objectum.style.maxWidth [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms530811%28v=VS.85%29.aspx

• overflow: Meghatározza, hogy mi történjen az elem tartalmával, ha eléri a szélességét, illetve magasságát.
  Paraméterek: visible (látható; alapértelmezett; a tartalom teljesen kiírásra kerül és az elemek mellé nem kerül oda a gördítőcsík; a méret átírható), scroll (gördíthető a tartalom teljesen kiírásra kerül és az elemek mellé odakerül a gördítőcsík is), hidden (rejtett; a tartóba be nem férő objektumok nem kerülnek kiírásra), auto (a gördítőcsík csak szükség esetén jelenik meg).
  HTML-minta: { overflow : paraméter }
  Scriptben: objectum.style.overflow [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms530824%28v=VS.85%29.aspx

• position: Mi legyen az elem pozíciója a szülőhöz képest?
  Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat), relative (relatív pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat), fixed (Internet Explorer 7 és utána; az objektum a tartalmazóhoz képest hol helyezkedik el).
  Alkalmazható irányok: left (bal), right (jobb), top (teteje), bottom (alja).
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms531140%28v=VS.85%29.aspx)

  <IMG SRC="akarmikep.jpg" STYLE="position:absolute; left:0; top:0"> <p>Felső index <SPAN STYLE="position: relative; top:-3px">xyz</SPAN> ebben a sorban.

• posLeft: A bal oldali pozíció a szülőhöz képest.
  Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat), relative (relatív pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat).
  Használata azonos a "left" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.posLeft [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531143%28v=VS.85%29.aspx

• posRight: A jobb oldali pozíció a szülőhöz képest.
  Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat), relative (relatív pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat).
  Használata azonos a "right" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.posRight [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531146(v=VS.85).aspx

• posTop: A felső pozíció a szülőhöz képest.
  Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat), relative (relatív pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat).
  Használata azonos a "top" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.posTop [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531147(v=VS.85).aspx

• posBottom: Az alsó oldali pozíció a szülőhöz képest.
  Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat), relative (relatív pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat).
  Használata azonos a "bottom" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.posBottom [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531137(v=VS.85).aspx

• posHeight: A magassági pozíció a szülőhöz képest.
  Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat), relative (relatív pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat).
  Használata azonos a "height" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.posBottom [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531139(v=VS.85).aspx

• posWidth: A szélességi pozíció a szülőhöz képest.
  Paraméterek: static (alapértelmezés; az elemnek nincs speciális pozicionálása), absolute (abszolút pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat), relative (relatív pozicionálás egységek: http://tferi.hu/html-konyv/css-mertektablazat).
  Használata azonos a "width" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.posWidth [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531148(v=VS.85).aspx

• pixelHeight: Beállítja, vagy megadja az elem szélességi pozícióját.
  Paraméter: egész_szám képpontban értve.
  Használata azonos a "height" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.pixelHeight [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531127%28v=VS.85%29.aspx

• pixelBottom: Beállítja, vagy megadja az elem alsó pozícióját.
  Paraméter: egész_szám képpontban értve.
  Használata azonos a "bottom" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.pixelBottom [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531125(v=VS.85).aspx

• pixelLeft: Beállítja, vagy megadja az elem bal oldali pozícióját.
  Paraméter: egész_szám képpontban értve.
  Használata azonos a "left" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.pixelLeft [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531129(v=VS.85).aspx

• pixelRight: Beállítja, vagy megadja az elem jobb oldali pozícióját.
  Paraméter: egész_szám képpontban értve.
  Használata azonos a "right" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.pixelRight [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531131(v=VS.85).aspx

• pixelTop: Beállítja, vagy megadja az elem felső pozícióját.
  Paraméter: egész_szám képpontban értve.
  Használata azonos a "top" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.pixelTop [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531133(v=VS.85).aspx

• pixelWidth: Beállítja, vagy megadja az elem szélességi pozícióját.
  Paraméter: egész_szám képpontban értve.
  Használata azonos a "width" attribútummal!
  HTML-minta: Nem támogatott!
  Scriptben: objectum.style.pixelWidth [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531135(v=VS.85).aspx

• visibility: A pozicionált elemek láthatóságának meghatározása.
  Paraméterek: visible (látható), hidden (rejtett), inherit (örökölt; alapértelmezett).
  HTML-minta: { visibility : paraméter }
  Scriptben: objectum.style.visibility [ = paraméter ]
  További beállítások: http://msdn.microsoft.com/en-us/library/ms531180%28v=VS.85%29.aspx

• z-index: Megadja az egyes elemek sorrendjét.
  Paraméterek: auto (ahogy a kódban következik; alapértelmezett) ,vagy egész_szám. Azonos értékű elemeknél a leírási sorrend számít.
  HTML-minta: { z-index : paraméter }
  Scriptben: objectum.style.zIndex [ = paraméter ]
  További minta: (Eredeti forráskód: http://msdn.microsoft.com/en-us/library/ms531188%28v=VS.85%29.aspx)

  <img id="cone" src="/kep1.jpg” alt="cone" style="position: absolute; top: 50px; left: 50px;" 
  onclick="cone.style.zIndex=1; sphere.style.zIndex=2">    
  <img id="sphere" src="/kep2.jpg alt="sphere" style="position: absolute; top: 45px; left: 45px;" 
  onclick="cone.style.zIndex=2; sphere.style.zIndex=1">