Position i förhållande - vad är det? detaljerad beskrivning

Häckande HTML - en långdragen process, rigorösa, men mycket kreativa. Trots det faktum att de flesta anställda inom IT, kan webbsidor layout verkar tråkig rutin, specialister som har en kallelse till ett sådant fall, inte bara kvalitativt utföra uppgiften, men också att få från processen av materiella njutning.

Men innan du blir en erfaren programmerare, tillbringar varje nykomling mycket tid att studera de olika instruktioner och specifikationer för både HTML-språket, och på dess allierade - CSS. Om exakt vad CSS, vad det är och vad "fint öron" gör det möjligt att få upp, liksom en av sina främsta egenskaper - position i förhållande - i dag ska vi prata.

Vad är CSS?

CSS Förkortning kan transkriberas och översättas till ryska som "Cascading Style Sheets". Det låter ganska konstigt - å ena sidan verkar det klart, och ord, och å andra sidan - är den allmänna meningen inte omedelbart fångas. Låt oss börja med det enkla - med stil. Denna teknik gör det möjligt att fästa föremål på sidan, vissa egenskaper avseende utseende som du bara kan registrera en gång och använda ett oändligt antal gånger.

Ordet "bord" i den officiella översättningen verkade nästan av en slump - i själva verket lämpligare här skulle vara att använda ordet "listor" eller "listor", men författarna i den ursprungliga översättningen beslutat att CSS ser ut mer än en lista, och vilka vi är så nu är att prova dem.

Slutligen ordet "Cascade". Faktum är att varje element kan ha flera stilar som kan blandas eller överlappar varandra. I sådana fall har webbläsaren att tillgripa en uppsättning regler för att komponera utseendet på blocket, som visade sig vara flera stilar, med en av dem, till exempel, har en position i förhållande egendom, och den andra - Position Absolut. I själva verket kan sådana konflikter inte tolereras, men i stora projekt sådan förvirring händer ganska ofta.

Så nu, när allt är klart från namnet, låt oss titta på ett enkelt exempel. Låt oss säga att din webbplats bör vara ett stort antal knappar, utformade på ett visst sätt. De har egenskaper som storlek, skugga, opacitet, färg. Naturligtvis kan du ange dessa parametrar, skapa varje knapp, men är mycket lättare att använda CSS. I praktiken måste du beskriva en viss klass, som listar värdena för alla ovanstående egenskaper, och sedan, i stället för en lång lista, kommer taggen för varje knapp endast behöver ange namnet på klassen, då webbläsaren själv kommer att färga dessa element i önskad färg och ge dem en ordentlig "glans".

Vad gör Position egendom?

Vi fortsätter nu direkt till fastigheten Position, till förmån för som inleddes hela den här artikeln. Om du är bekant med det engelska språket, eller har en god intuition, så ska du redan vara klar - den här egenskapen är ansvarig för platsen för objektet. I själva verket, så det är, men i stället bestämma den specifika platsen, berättar den här egenskapen webbläsaren hur den ska placeras på ett eller annat element med avseende på intilliggande eller över sidan som helhet.

Vilka värden kan positionen egendom?

Vår fastighet kan acceptera flera olika värden, det finns bara fem. Här är en kort beskrivning av varje:

• Position Inherit. Denna funktion gör det möjligt att kopiera data på placeringen av det element som är en förälder. Till exempel, om du har en div med en viss position i förhållande, sedan in i det med IMG ärva värde också kommer att sättas till släkting.
• Placera Statisk. Detta värde ges till alla element automatiskt om inget annat anges längre. Elementen passar på plats som nämns i koden och är inte tillgängliga för en mängd olika "krusiduller", gör det möjligt att ändra sin position.
• Position Absolut. Genom detta värde Position fastigheten är ganska ofta i fall där det är nödvändigt att skapa en del "flytande". Med ett givet värde på fastigheten objektet är "osynliga" för de övriga komponenterna i sidan. Det vill säga, de är arrangerade som om vår absoluta inslag inte existerar. Han själv kommer alltid att vara på plats, oavsett hur långt har rullat sida.
• Position Fast. På många sätt, är detta värde som liknar den föregående, emellertid, medan den absoluta elementet är bunden till moder, fasta användningar endast koordinaterna för det övre vänstra hörnet av webbläsarskärmen ignorerar resten av de element som föregick det.
• Slutligen, position i förhållande. Denna typ värden tillåter positioneringselementet i förhållande till det andra, vilket kan vara användbart för att skapa en adaptiv märkning kallas gemensamt "gummi". Med denna egenskap, kommer objektet "push" den andra, utan att förlora förmågan att ändra sin position på sidan.

Att arbeta med Position i olika webbläsare

Inte alla webbläsare är lika kompatibla. Medan de flesta alternativa program för surfande utan några missöden upplevda värdet av Position är helt sant, "kroniskt speciell» Internet Explorer anser fastigheten, beroende på dess version.

Till exempel genom att använda redan "begravd" webbläsaren IE6, kan du inte använda det värde som fastställs och Inherit - "åsna" de helt enkelt ignorera det. Trots det faktum att den sjunde versionen av situationen började förbättras, och Fast redan bearbetats, att ärva älskade "webbläsare för att ladda ner andra webbläsare," nådde bara i sin åttonde inkarnation.

Resten av observatörerna lugnt hantera Position med den första versionen, med undantag för Opera, som har fått stöd av fastigheterna i sina 4 varianter, som publicerades i mitten av 90-talet.

Att arbeta med Position i Javascript

I själva verket, berättelsen om hur man arbetar med Position egendom i Javascript, vi har inkluderat bara för sakens skull anständighet. Eftersom den här egenskapen inte har några speciella tecken i rubriken, kan du använda JS utan några ändringar, till exempel, för att ställa in div position i förhållande, bör innehålla en rad som denna: div.style.position = 'relativa'.

Som ni kan se, är det ganska enkelt.

Varför position i förhållande förtjänar särskild uppmärksamhet?

Medan de flesta av fastighetsvärden Position, för att uttrycka det milt, "spottade" på de omgivande elementen med hjälp av värdet "style position: relativ", alltid ska komma ihåg om hela sidan som en helhet, eftersom felaktig användning kan starkt "skev" hela innehållet på skärmen .

Dessutom har denna fastighet bara tillåter dig att enkelt konvertera fast konstruktion adaptiv, eftersom dess tillämpning kommer att påverka automatiskt alla innehållssidor. Då har vi fortfarande tid att överväga exemplen och fel med detta värde, och du kommer att se dess påtagliga betydelse i praktiken.

När ska du använda relativ positionering?

Förutom den konventionella utformningen av sidor HTML, position i förhållande används ofta för att skapa en mängd intressanta effekter. Till exempel, om du vill ha en post "kom" på en sida eller tvärtom, så småningom gick utöver sitt territorium, är det just den här egenskapen kan hjälpa dig att genomföra detta "trick".

Dessa "knep" genomförs genom Javascript är eller om du sträva efter den progressiva införandet genom egenskaper CSS3, som gör att du kan justera den cykliska förändringen i värdet av en viss variabel.

Dessutom i vissa fall möjligt att skapa "hybrid" värden position i förhållande. CSS, men inte på samma gång kan du ställa in något liknande position: absolute släkting, men genom att använda några knep, är det fortfarande möjligt att uppnå denna effekt. Detta tillvägagångssätt kan vara användbart i de fall där du behöver för att skapa något komplex som ett verktygstips eller popup-meny. Väger exemplen kommer vi att ge en beskrivning av strukturen av en sådan "hybrid".

Exempel på användning av den relativa rankningen

Position i förhållande - det är ganska enkelt, men flexibelt verktyg som låter dig att genomföra en mängd intressanta effekter. För att inte slösa tid och plats att skriva värdelös kodmall presenterar vi flera orala algoritmer, som kan dekorera din webbplats eller specifika sidor.

Låt oss börja med "slut" linje. Anta att du har ett behov av ett element som kommer att "resa", eftersom den vänstra kanten av skärmen och sakta flytta den till höger. För att genomföra en sådan "mekanism" bör sätta Position: relativ; vänster: -100px, där -100 - det ungefärliga antalet av de bildpunkter som utgör blocket bredd. Denna stil gör att du kan dölja enheten utanför skärmen, placera den i "utgångsläget". Nu kan du använda ett skript som kommer att öka med några millisekunder kvar fastighetsvärde per enhet så länge det inte blir lika med bredden på webbläsarfönstret minus bredden av elementet. Resultatet är en enhet som kommer ut ur den vänstra kanten, rullas över skärmen och "parkeras" i hans högra hand.

Ett annat exempel kan du skapa "relativa absoluta" element. Till exempel kan du skriva in en absolut inuti en annan, med position i förhållande. Som ett resultat, har vi en "relativ" block som inte har storlek till vilken det absoluta är inskrivet, kan nu visa sig i en position som är oberoende av det föregående elementet.

Typiska misstag när du använder position i förhållande

Det vanligaste misstaget när du använder position i förhållande är att många webbdesigners glömma möjligheten att reservera en plats i enheten, som kan placeras var som helst. Till exempel, om du har en ganska stor, placerad utanför skärmen och som har en relativ positionering, kommer i dess ställe vara ett gapande "hål". Men även den här egenskapen ibland skapar vissa olägenheter kan användas för gott, till exempel att skapa en intressant effekt av "självorganiserande" på webbplatsen, där alla dess block successivt placeras i toppositionen: 0; vänster: 0; t. e. sin ursprungliga plats.