Posició relativa - què és? Descripció detallada

Implantació HTML - un procés llarg i rigorós, però molt creatiu. Malgrat el fet que per a la majoria de les persones ocupades en TI, disseny de pàgines web pot semblar avorrida rutina, els especialistes que tenen una vocació per a tal cas, no només porten qualitativament a terme la tasca, sinó que també reben del procés de plaer tangible.

Abans, però, d'esdevenir un codificador experimentat, cada nouvingut passa molt temps a l'estudi de les diverses instruccions i especificacions de tant el llenguatge HTML, i en el seu aliat - CSS. Sobre exactament el CSS, el que és i el "orelles" finta li permet aixecar-se, així com una de les seves propietats més importants - Posició Relativa - Avui parlarem.

Què és CSS?

Abreviatura CSS pot ser transcrit i traduït al rus com "fulls d'estil en cascada". Sona bastant estrany - per una banda, sembla clar, i les paraules, i per l'altre - el significat general no és immediatament capturat. Anem a començar amb la simple - amb estil. Aquesta tecnologia li permet adjuntar objectes a la pàgina, certes característiques pel que fa a l'aparença que només es pot registrar-se una vegada i utilitzar un nombre infinit de vegades.

La paraula "taula" en la traducció oficial va aparèixer gairebé per accident - de fet, més apropiat en aquest cas seria l'ús de la paraula "llistes" o "llistes", però, els autors de la traducció original van decidir que el CSS s'assembla més d'una llista, i qui som tal és ara de provar-les.

Finalment, la paraula "cascada". El fet és que cada element pot tenir diversos estils que es poden barrejar o fins i tot es superposen. En aquests casos, el navegador ha de recórrer a un conjunt de normes, per tal de compondre l'aspecte del bloc, que va resultar ser de diversos estils, amb un d'ells, per exemple, té una posició de propietat relativa, i l'altre - Posició absoluta. De fet, aquest tipus de conflictes no poden ser tolerats, però en grans projectes de tal confusió passa molt sovint.

Així que ara, quan tot està clarament pel seu nom, anem a veure un exemple senzill. Diguem que el seu lloc ha de ser un gran nombre de botons, dissenyat d'una manera determinada. Tenen propietats com la mida, l'ombra, l'opacitat, el color. Per descomptat, es pot especificar aquests paràmetres, la creació de cada botó, però és molt més fàcil d'utilitzar CSS. A la pràctica, cal descriure una determinada classe, que enumera els valors de totes les propietats anteriors, i després, en lloc d'una llarga llista, l'etiqueta de cada botó només haurà d'especificar el nom de la classe, llavors el navegador en si aporten color a aquests elements en el color desitjat i donar-los una adequada "brillantor".

El que fa la propietat de posició?

Ara procedim directament a la posició de propietat, pel bé de que es va iniciar tot aquest article. Si està familiaritzat amb l'idioma anglès, o tenir una bona intuïció, llavors ja hauria d'estar clar - aquesta propietat és responsable de la ubicació de l'element. De fet, la forma en què està, però en lloc de determinar la ubicació específica, aquesta propietat indica al navegador com ha de col·locar-un o un altre element que fa al adjacent oa través de la pàgina en el seu conjunt.

Quins valors poden la propietat Posició?

La nostra propietat pot acceptar diversos valors, només cinc són. Heus aquí una breu descripció de cada un:

• Heretar posició. Aquesta característica li permet copiar les dades sobre la posició de l'element que és un dels pares. Per exemple, si vostè té un div amb una relativa posició especificada, després va entrar-hi amb valor hereta IMG també s'establirà en relativa.
• Posició estàtica. Es dóna aquest valor a tots els elements de forma automàtica, llevat que s'indiqui més. Els elements encaixen en posició com s'ha esmentat en el codi i no estan disponibles per a una varietat de "volants", el que permet canviar la seva posició.
• Posició absoluta. Per aquest valor la propietat de posició s'utilitza molt sovint en els casos en què és necessària la creació d'un element "flotant". Amb un valor donat de l'element propietat és "invisible" per als altres components de la pàgina. És a dir, que es disposen com si el nostre element absoluta no existeix. Ell mateix sempre estarà al seu lloc, sense importar molt com ha desplaçat pàgina.
• Posició fixa. En molts sentits, aquest valor és similar a l'anterior, però, mentre que l'element absoluta s'uneix a la matriu, fixa només utilitza les coordenades del cantó superior esquerra de la pantalla del navegador, ignorant la resta dels elements que el van precedir.
• Finalment, la posició relativa. Aquest tipus valors permet element de posicionament respecte a l'altre, que pot ser útil per crear un adaptativa marcat cridat en "cautxú" comú. Amb aquesta propietat, l'article serà "empènyer" l'altre, sense perdre la capacitat de canviar la seva posició a la pàgina.

Treballar amb Posició en diferents navegadors

No tots els navegadors són igualment compatibles. Mentre que la majoria dels programes alternatius per a la navegació per Internet de manera impecable valor de posició percebuda és absolutament cert, "crònicament especial» Internet Explorer considera que la propietat, depenent de la seva versió.

Per exemple, utilitzant el ja "enterrat" el navegador Internet Explorer 6, no es pot utilitzar el valor fix i Heretar - "burro" que simplement ho ignoren. No obstant això, malgrat el fet que la setena versió de la situació va començar a millorar, i es fixa ja processada, a Heretar estimada "navegador per descarregar altres navegadors," aconseguit només en la seva vuitena encarnació.

La resta dels observadors amb calma gestionar Posició amb la primera versió, amb l'excepció d'Opera, que té el suport de les propietats en les seves 4 variants, publicat a mitjans dels anys 90.

Treballant amb la Posició en Javascript

De fet, la història de com treballar amb la propietat Posició en Javascript està, hem inclòs només pel bé de la decència. A causa de que aquest establiment no ha rebut cap caràcter especial en el títol, es pot utilitzar la JS sense cap canvi, per exemple, per a fixar la posició relativa div, ha d'incloure una línia com aquesta: div.style.position = 'relatiu'.

Com es pot veure, és bastant simple.

Per què la posició mèrits relatius d'atenció especial?

Mentre que la major part del valor de les propietats de posició, per dir-ho suaument, "posició d'estil: relative" "escopir" en els elements que l'envolten, utilitzant el valor, sempre ha de recordar sobre tota la pàgina com un tot, perquè l'ús incorrecte tot el contingut de la pantalla pot forta "inclinació" .

A més, aquesta propietat només li permet convertir fàcilment adaptable disseny fix, ja que la seva aplicació afectarà de forma automàtica totes les pàgines de contingut. A continuació, encara tenim temps per considerar els exemples i els errors utilitzant aquest valor, i veurà el seu significat tangible en la pràctica.

Quan s'ha d'utilitzar el posicionament relatiu?

A més de la disposició convencional de pàgines HTML, Posició Relativa sovint s'utilitza per crear una varietat d'efectes interessants. Per exemple, si voleu que un element "vi" en una pàgina o, per contra, es va anar gradualment més enllà del seu territori, és precisament aquesta propietat pot ajudar a implementar aquest "truc".

Aquests "trucs" són implementades a través de Javascript és, o, si el teu objectiu per a la imposició progressiva, a través de les propietats de CSS3, que li permeten ajustar el canvi de cicle en el valor d'una variable en particular.

A més, en alguns casos possibles per crear valors de "híbrids" posició relativa. CSS, encara que no al mateix temps li permet establir una mena position: relative absoluta, però mitjançant l'ús d'alguns trucs, encara és possible per aconseguir aquest efecte. Aquest enfocament pot ser útil en els casos en què és necessari crear una cosa tan complexa com un text d'ajuda del menú emergent o. Tenint en compte els exemples, es donarà una descripció de l'estructura d'un tal "híbrid".

Exemples de l'ús de la classificació relativa

Posició relativa - és bastant simple, però eina flexible que li permet implementar una varietat d'efectes interessants. Per tal de no perdre el temps i lloc per escriure plantilla de codi inútil, es presenten diversos algoritmes orals, que poden decorar el seu lloc o pàgines específiques.

Anem a començar amb la línia de "esgotat". Suposeu que té una necessitat d'un element que va a "viatjar" a causa que la vora esquerra de la pantalla i lentament moure cap al costat dret. Per implementar un "mecanisme" tal ha de fixar la posició: relative; esquerra: -100px, on -100 - el nombre aproximat dels píxels que constitueixen l'ample del bloc. Aquest estil li permetrà ocultar la unitat fora de la pantalla, col·locant-ho en la "posició inicial". Ara es pot utilitzar un script que augmentarà cada pocs milisegons deixat valor de la propietat per unitat, sempre que no es converteixi igual a l'amplada de la finestra del navegador menys l'amplada de l'element. El resultat és una unitat que surt de la riba esquerra, laminat per la pantalla i "aparcat" a la mà dreta.

Un altre exemple li permet crear elements "relativa-absolutes". Per exemple, es pot introduir un absolut dins d'un altre, tenir posició relativa. Com a resultat, tenim un bloc "relatiu" que no té la mida a la que s'inscriu l'absoluta, és ara capaç de manifestar-se en una posició independent de l'element anterior.

Errors típics quan s'utilitzen Posició relativa

L'error més comú quan s'utilitza la relativa posició és que molts dissenyadors web oblidar-se de la possibilitat de reservar un lloc en la unitat, que pot estar situat en qualsevol lloc. Per exemple, si teniu una bastant gran, col·locat fora de la pantalla i tenir un posicionament relatiu, al seu lloc hi haurà un enorme "forat". No obstant això, fins i tot aquesta propietat es crea de vegades certs inconvenients es poden utilitzar per al bé, per exemple, creant un interessant efecte de "auto-acoblament" del lloc, on tots els seus blocs es col·loquen gradualment en la posició superior: 0; esquerra: 0; t. e. la seva ubicació original.