Rétegek · Archívum ·

Egy tipikus hipertext dokumentum minden eleme valahogy befolyásolják egymást kialakításakor a megjelenését. E. A bekezdés „eltolja” követik bizonyos távolságban lefelé a kép jobbra igazított „erők” a szöveget áramlás körül, és m. N. összes elemet együtt az úgynevezett «HTML-flow»vagy«flow dokumentum» (dokumentum-flow).

Rétegek viszont - része az oldal, amely nem tartalmazza az alap HTML-patak. Mert mindegyikük létre saját, extra áramlás, amelyek nem érintik a mag. Így szolgálhat uralom alatt (lásd fent) a fő tartalom és helyezzük a helyhez kötött meghatározott pixel a bal felső sarokban az oldal.

Rétegekkel, akkor nem mindenféle pop-up / legördülő menük, drag and drop elemek áttetsző kijelző és egyéb t. N. «Eye-cukorkák».

Mielőtt elhagyja NN4 (és a későbbi kiadás MSIE4) van egy működő változat (munkaterv) specifikáció című «Positioning HTML elemek a Cascading Style Sheets» (más néven CSS-P). Ez a specifikáció nem vált egy ajánlást, mert része volt a CSS level 1, de még mindig megtalálható az oldalon W3C.

Mit mond ez a dokumentum? Leírja kétféleképpen (három, ha számít az alapértelmezett viselkedést - statikus helyzet) elhelyezése elemeket az oldalon: viszonylag és abszolút.

Az első esetben, amikor a tag van elhelyezve képest más elemek a HTML-patak, elveszi a szokásos helyére az oldalon, és kölcsönhatásba más elemeket oly módon, mintha a leggyakoribb elem. Jellemzője, hogy leírható „offset” képest más elemeit az oldal m. E. Viszonylag. Annak ellenére, hogy számos példa van a használata viszonylag pozicionált elemek, mint a szabály, hogy nem használják a tervezett célra. Személy szerint számomra, hogy csak akkor kell meghatározni a helyzetét egy adott oldal eleme NN4.

A második esetben - egy abszolút pozicionált elemek, és vannak rétegek.

Nagyon egyszerű. Rant, hogy kell használni a MSIE

. és NN4 - Nem fogok - ez nem az. Csak azt kell használni CSS (közel írt CSS-P ;-)).

Tehát, hogy egy réteg, amely visszavonul 100px a bal felső sarokban az oldal, hogy írjon be az alábbi kódot:

Ez a kód működni fog minden böngészőben fenti 4-es verzió, az Opera és még NN6 / Mozilla.

Lehetőség van, hogy a réteg után is a végleges dokumentum van betöltve. Persze, ez nem olyan simán, mint HTML'e. Nem így kompatibilisek. AI nem könnyű.

ahol n - réteg szélessége pixelben.

Ellentétben NN4, a MSIE4 rétegek - ezek ugyanazokat az elemeket, mint a többi (azaz, nem specifikus tárgyak). Hanem azért, mert a gyenge objektum modell, egy új réteget ki kell egészíteni, hogy a végén az oldal, mint a normál HTML-kód egy speciális insertAdjacentHTML () függvényt. És annak érdekében, hogy azt mutatják, hogy ez nem egy szokványos statikus elem, meg kell adnia az abszolút pozicionálás:

Ebben az esetben, ha a stílus nincs megadva réteg szélessége (style = „szélesség: 150;”), ez nem határozza meg attól függően a tartalom alapértelmezett érték 100% az ablak szélessége.

Ez böngészők MSIE5 + és NN6 / Mozilla. Amennyire én tudom, annak ellenére, hogy a támogatási nyilatkozatokat DOM Opera nem fog működni.

A böngészők támogatják a DOM módszerek a rétegek, mint a MSIE4, mint a szokványos HTML-elemek, csak használ DOM módszerekkel. Ebben az esetben a feladat tulajdonságai sok tekintetben hasonlít ahhoz, ahogy a tulajdonságok meghatározott NN4.

DOM-elem módszer, hogy hozzon létre - ez document.createElement (). Segítségével az ego, akkor létrehozhat bármilyen tárgy összhangban DTD, mellyel az oldalon. A mi esetünkben ez lesz

:

Az új elem jön létre, és rögzítik a változó newLeer. Most meg kell adnia a nevét és helyét. A megadott név a standard módszerrel setAttribute (). helyzetben - egy stílus tárgy, amely bármilyen HTML-elemek:

Ezt követően, létre kell hoznunk a tartalmát a réteg. Ha ezt a HTML-elemeket, akkor kell használni, hogy ugyanazt a módszert document.createElement (). és ha ez csak szöveg, akkor létre kell hozni textNode módszerrel document.createTextNode ():

Ennek eredményeként, van két változó: newLeer és newLeerContents. Meg kell tenni a tartalmát az ágyra, és viszont, hogy a dokumentum réteg. Ehhez van egy másik DOM-módszer - AppendChild ():

De ha keresünk a könnyebb utat? ;-)

Példa függvényt, amely létrehozza rétegek minden böngészőben nem vezet, ha szükség van rá, nincs kétségem afelől, hogy akkor írd meg magad.

Kapcsolódó cikkek