Positioun Relativ - wat ass et? detailléiert Beschreiwung

Gären HTML - e laangwierege Prozess, genau, mee ganz kreativ. Trotz der Tatsaach, datt fir d'Majoritéit vun de Leit am IT Employéen, Web Säiten Layout langweileg Iddi schéngen Mee Spezialisten déi eng Bestëmmung fir esou engem Fall hunn, net qualitativ nëmmen d'Aufgab maachen, mä och aus dem Prozess vun siichtbarst Freed kréien.

Mä ier Dir en erfuerene ewech ginn, gëtt all Amateur vill Zäit déi verschidde Spiller hiert Gléck an Spezifikatioune vu béiden der HTML Sprooch studéiert, an op sengem Alliéierten - CSS. Ongeféier genee wat CSS, wat ass et a wat "feint Oueren" kënnt Dir bis zu kréien, wéi och eent vu senge erop Eegeschafte - Positioun Relativ - haut wäert mir schwätzen.

Wat ass CSS?

CSS Ofkierzung kann an Russesch als "Kaskadespär Stil Blieder" ausserdeem an iwwersat ginn. Et Kläng flott komesch - op der engersäits, et schéngt kloer, a Wierder, an wollt den Trainer - déi allgemeng Bedeitung net direkt ageholl ass. Loosst d'mam einfach ufänken - mat Stil. Dës Technik erlaabt Iech Objeten op der Säit, bestëmmte Charakteristiken iwwer der Optrëtt zu befestegt dass Dir nëmmen eemol umellen kann an eng onendlech Zuel vun Zäiten benotzt.

D'Wuert "Dësch" op déi offiziell Iwwersetzung wossten bal vun Accident - an eigentlech méi adäquat hei wier d'Wuert "Lëschten" ze benotzen oder "Lëschten" Ee den Auteuren vun der Original Iwwersetzung decidéiert datt d'CSS wëll méi gesäit wéi eng Lëscht, an dee mir esou ass se elo ze probéieren.

Endlech, d'Wuert "Cascade." D'Tatsaach ass, dass all Element puer Stiler hun kann deer gin kann oder souguer iwwerlageren. An esou Fäll ass de Browser engem Set vu Regelen ze Auswee, fir den Optrëtt vun der Spär ze komponéieren, déi verschidde Stiler gin war eraus, mat ee vun hinnen, zum Beispill, eng Positioun Relativ Propriétéit huet, an déi aner - Positioun Absolut. An Tatsaach, kann net esou Konflikter toleréiert ginn, mä am grousse Projeten esou Duercherneen geschitt ganz oft.

Also elo, wann alles aus den Numm kloer ass, mer elo bei engem einfachen Beispill kucken. Loosst d'soen äre Site enger grousser Zuel vun Knäppercher ginn soll, an engem gewësse Manéier entworf. Si hunn Eegeschafte wéi Gréisst, Komunikatioun, Opazitéit, Faarf. Natierlech, kënnt Dir dëse Parameteren uginn, all Knäppchen schafen, mä ass vill méi einfach CSS ze benotzen. An der Praxis, braucht Dir e bestëmmte Klass ze beschreiwen, déi d'Wäerter vun all vun der uewen Eegeschafte Lëschten, an dann, amplaz eng laang Lëscht, der Tag vun all Knäppchen gëtt nëmmen brauchen den Numm vun der Klass bis uginn, da de Browser selwer wäert dës Elementer an de gewënschte Faarf an ginn hinnen eng eegen "wi".

Wat heescht d'Positioun Besëtz?

Mir viru elo direkt op de Besëtz Positioun zum Wuel vun deem ganzen Artikel ugefaangen huet. Wann Dir kennt mat der Sprooch Englesch sinn, oder eng gutt Usiicht hunn, da soll Dir scho kloer ginn - dat Verméigen fir d'Lag vun der Kuurzmeldung responsabel ass. An Tatsaach, dat de Wee ass, mä amplaz d'spezifesch Plaz bestëmmen, seet dëser Propriétéit de Browser, wéi soll dat mat Respekt ze bascht oder ganze Säit als ganz eent oder anert Element gesat ginn.

Wat Wäerter kann d'Positioun Besëtz?

Eis Propriétéit kënnt puer verschiddene Wäerter akzeptéieren, et sinn nëmmen fënnef. Hei ass eng kuerz Beschreiwung vun all:

• Positioun ierwen. Dës Fonktioun erlaabt Dir der Donnéeën iwwert d'Positioun vun der Element ze kopéieren, datt engem Elterendeel ass. Zum Beispill, wann Dir eng Divisiounen mat engem uginn Positioun Relativ hun, koum dann an et mat img ierwen Wäert gëtt och zu Relativ virbereet ginn.
• Positioun méi statesch ginn. Dëse Wäert ass fir all Elementer automatesch kritt, ausser all méi ugewisen. D'Elementer fit an Positioun wéi am Code ernimmt a sinn net fir eng Rei vun "gekënnegt" sinn, datt hir Positioun ze änneren.
• Positioun Absolut. Vun dësem Wäert ass d'Positioun Propriétéit relativ oft an Fäll benotzt, wou et néideg ass eng "Wénkel gekäppt" Element ze schafen. Mat engem bestëmmte Wäert vun der Propriétéit Punkt ass "onsichtbar" fir déi aner Deeler vun der Säit. Dat ass, sinn si arrangéiert wéi wann eis absolute Element gëtt et net. Hien selwer wäert ëmmer am Plaz ginn, egal wéi wäit Säit scrolled ginn.
• Positioun Plaz. A ville Weeër, ass dëse Wäert ähnlech dem virdrun ee Ee, iwwerdeems de absolute Element fir d'Elteren gebonnen ass, fix benotzt nëmmen d'Koordinaten vun der ieweschter lénks Corner vum Browser Écran, de Rescht vun der Elementer Rücksicht huelen, datt et Zousaz.
• Endlech, Positioun rel. Dësen Typ Wäerter erlaabt relativ positionéiert Element fir déi aner, déi fir schafen eng adaptiven nëtzlech kann gemeinsam "Gummistécker" genannt bewaacht. Mat dëser Propriétéit, wäert de Punkt "Auslänner" déi aner, ouni Verléierer aus der Fähegkeet hir Positioun op der Säit ze änneren.

Schafft mat Positioun an verschidden Browser

Net all Browser sinn gläich kompatibel. Während déi meescht Alternativ Programmer fir Internet ze surfen ouni Wäert vun Positioun ugesi hitches absolut richteg ass, "chronically speziell» Internet Explorer méngt der Propriétéit, je seng Versioun.

Zum Beispill, déi schon "begruewen" de Browser IE6 benotzt, kënnt Dir net der Wäert Plaz an ierwen benotzen - "Ieselsmier" se et einfach ignoréieren. Mä trotz der Tatsaach, datt déi siwent Versioun vun der Situatioun ze verbesseren ugefaang un, an enger Plaz schonn Filteren, schéint ze ierwen "Browser aneren Browser ze erofzelueden," erreecht nëmmen a senger aachten geleet gëtt.

De Rescht vun der Observateuren cool Positioun mat der éischter Versioun, mat Ausnam vun Opera, packen déi d'Ënnerstëtzung vun der Eegeschaften an hirer 4 Variatioune krut huet, an der Mëtt-90er publizéiert.

Schafft mat Positioun an Javascript

An Tatsaach, der Geschicht vun wéi mat der Positioun Propriétéit zu Javascript ze schaffen ass, hunn mir just fir d'Wuel vun virausgesinn abegraff. Well dëst Verméigen hunn et keng speziell Personnagen am Titel, kanns de JS ouni Ännerungen benotzt, zum Beispill, d'Divisiounen Positioun relativ zu virbereet, soll eng Linn wéi dat och: div.style.position = "relativ".

Wéi Dir gesitt kann, ass et relativ einfach.

Firwat Positioun Relativ Notzen speziell Opmierksamkeet?

Iwwerdeems Meeschter um Besëtz Wäerter Positioun et betounen bis Mëtt duerchgesat huet, "him" op der ronderëm Elementer, de Wäert "Stil Positioun: relativ" benotzt, soll iwwer de ganzen Säit als Ganzt, well Messstänn benotzen kann staark "Schoulen, dee keen" de ganzen Inhalt vun der Écran ëmmer erënneren .

Zousätzlech, nëmmen dat Verméigen erméiglecht Iech einfach fix Design adaptiven geflunn, well hir Demande automatesch all Inhalt Säiten Afloss gëtt. Dunn hu mer nach Zäit, d'Beispiller an Feeler benotzt dëse Wäert ze betruecht, an Dir wäert seng siichtbarst Bedeitung an Praxis gesinn.

Wéi soll Dir relativ positionéiert benotzt?

Nieft der konventionell Layout vun Säiten HTML, Positioun Relativ dacks benotzt eng Rei vun interessanten Effekter ze schafen. Zum Beispill, wann Dir en Element "duerch" op enger Säit oder, am Géigendeel wëllen, no ass doriwwer eraus seng Territoire, ass et genee dës Propriétéit kënnt Dir dëse "markéiert" Hëllef ëmsetzen.

Dës "Tricken" sinn duerch Javascript ëmgesat ass, oder, wann Dir fir de II Geldboussen Zil, duerch d'Eegeschafte vu CSS3, wat erlaabt Dir der cyclical änneren am Wäert vun enger besonnesch dicht ze ajustéieren.

Zousätzlech, an e puer Fäll méiglech ze schafen "Hybrid" Wäerter Positioun rel. CSS, wann net op der selwechter Zäit kënnt Dir eppes wéi Positioun ze setzen: absolute relativ, mä vun e puer Tricken mat, et ass nach méiglech dësem Effet ze erreechen. Dës Approche kann zu Fäll nëtzlech gin wou Dir eppes komplex wéi brauchen ze schafen eng tooltip oder Pop-up Menü. d'Beispiller que, wäerte mir eng Beschreiwung vun der Struktur vun esou enger ginn "Hybrid."

Beispiller vun der relativer Ranking mat

Positioun Relativ - Et ass flott einfach, mee flexibel Outil dass Dir eng Rei vun interessanten Effekter ze realiséieren erlaabt. Fir keng Zäit ze verléieren an Plaz fir Schiermer Code Skelett schreiwen, mir presentéieren puer mëndlech algorithms, wat Är Site oder spezifesch Säiten Fiche kann.

Loosst d'mat "lafen eraus" Linn ufänken. Stellt Iech e brauch fir en Element hunn, datt gëtt "reesen" well lénks Wäitschoss vum Écran an lues et un der rietser Säit réckelen. Ze realiséieren esou engem "Mechanismus" soll Formatioun Positioun: relativ; lénks: -100px, wou -100 - de geschätzte Zuel vun de Pixel der Spär Breet constituting. Dësen Stil wäert erlaben Iech der Eenheet ausserhalb vum Bildschierm ze verstoppen, ass et an der "ab Positioun" Placement. Elo kënnt dir eng Schrëft benotzen dass all puer Millisekonnen lénks Propriétéit Wäert pro Unitéit Erhéijung gëtt soulaang et net zu der Breet vun der Fënster selwecht heescht ginn Minus der Breet vun der Element. D'Resultat ass eng Eenheet, déi aus der rietser Wäitschoss kënnt, Foireshalen ganze Écran an "geparkt" an seng riets Hand.

Anert Beispill erlaabt Iech "relativ-absolute" Elementer ze schafen. Zum Beispill, kënnt Dir en absolute bannen aneren, dien Positioun Relativ gitt. Als Resultat, mer e "relativ" Spär hunn, datt net d'Gréisst de absolut op déi et hunn ass Musekschoul, ass elo konnt sech onofhängeg vun der viregter Element an enger Positioun ze manifestéieren.

Typesch Feeler wann Positioun Relativ benotzt

De stäerkste gemeinsam Feeler wann d 'Positioun Relativ benotzen ass dass vill Web Designer iwwert d'Fähegkeet vergiessen eng Plaz an der Eenheet ze reservéieren, déi iwwerall läit kann. Zum Beispill, wann Dir eng ganz grouss hunn, ausserhalb vun der Écran Faarwe an engem relativ positionéiert mussen, an seng Plaz wäert e gaping "Lach" ginn. Allerdéngs, och ass dëst Verméigen schaaft heiansdo bestëmmte inconveniences ka fir gutt benotzt ginn, zum Beispill, eng interessant Effekt vun "Self-zesummen" vum Site ze schafen, wou all vu sengem Bleck lues zu widdert Positioun gesat ginn: 0; lénks: 0; t. e. Originalgréisst Plaz.