Blockera plats till höger css. Absolut positionering i CSS: förstå en gång för alla

Är du fortfarande förvirrad över hur absolut positionering fungerar i CSS och tappar du element på skärmen? Låt oss förstå denna magi.

Introduktion till positionering När du ställer in position: absolute , är det inte själva elementet som kommer i förgrunden, utan dess överordnade behållare, eftersom positionering i CSS är relativ till det. Svårigheten är att detta inte alltid är elementets närmaste förälder.

Låt oss titta på en kod med fyra divs kapslade inuti varandra som en häckande docka.

< body >

< div class = "box-1" >

< div class = "box-2" >

< div class = "box-3" >

< div class = "box-4" > < / div >

< / div >

< / body >

Box-1, box-2 och box-3 är centrerade för skönhet med marginalen: auto och flex CSS-egenskaper. Box-4-blocket förblir i sin standardposition i dokumentflödet.

body ( display: flex; ) .box-1, .box-2, .box-3 ( display: flex; marginal: auto; )

kropp (

display: flex;

Box-1,

Box-2,

Box-3 (

display: flex;

Marginal: auto;

Alla fyra element har standardpositionering. På just nu layouten ser ut så här:

.box-4 utan positionering I förhållande till vad positionerar vi?

För att positionera sig själv måste ett element kunna två saker:

vilken förälder som kommer att bli utgångspunkten;
mängden förskjutning i förhållande till referenspunkten (topp, botten, höger eller vänster).

Om du definierar position: absolut för ruta-4 kommer det elementet att lämna det normala flödet av dokumentet. Men nu förblir den på sin plats, eftersom offsetkoordinaterna inte är specificerade. Om bredden på ett element inte är definierad i CSS kommer den att vara lika med bredden på dess innehåll (plus utfyllnad och kantlinje).

.box-4 med absolut positionering utan offset

Låt oss nu lägga till egenskaperna överst: 0 och vänster: 0 . Elementet måste bestämma vilken överordnad behållare som ska bli referenspunkten för dessa koordinater. Det närmaste elementet med en icke-statisk position (oftast position: relativ) blir det. box-4 börjar förhöra sina förfäder en efter en. Varken box-3, box-2 eller box-1 är lämpliga, eftersom de har en standardpositionering i CSS (unset).

Om en positionerad förfader inte hittas placeras elementet i förhållande till dokumentets kropp:

.box-4 med absolut positionering. Föräldraelement utan positionering

Om du ställer in position: relativt box-1-elementet, blir det referenspunkten:

.box-4 med absolut positionering. .box-1 med relativ positionering

Ett absolut positionerat element är placerat i förhållande till dess närmaste positionerade förfader.

När en referenspunkt har hittats upphör allt ovanför den i DOM-trädet att spela roll.

Om du ställer in position: relativ även för ruta-2, kommer ruta-4 att placeras relativt den, eftersom denna förfader är närmare.

.box-4 med absolut positionering. .box-2 med relativ positionering

Likaså för box-3-behållaren:

I HTML-språk Alla element kan delas in i block och inline. Blockelement representeras vanligtvis som rektangulära områden med viss mängd information. Med deras hjälp byggs sidrutnätet. Sådana element upptar allt utrymme som är tillgängligt för dem i bredd, och det finns vanligtvis en radbrytning före och efter dem. Block kan ges indrag, horisontella och vertikala dimensioner.

Egenheter blockelement

Blocktaggar inkluderar taggar som markerar ett stort antal textinformation: , ,

, , ,

Givet en innehållsbredd är den totala blockbredden summan av värdena för höger och vänster utfyllnad, marginal, ram och bredd. Vid en given höjd - från toppen och botten stoppning, marginaler, gränser och höjd. Text i blockelement är vänsterjusterad som standard. Om ett av dem innehåller inline-element tillsammans med blockelement, skapas ett anonymt block runt inline-elementen. Standardstilen kommer att tillämpas på den. Den kommer också att ärva den angivna stilen som tilldelats dess överordnade.

Flöde hänvisar till den ordning i vilken sidelement visas, bestämt av egenskaperna som anges i CSS. I det här fallet, som standard, arrangeras block uppifrån och ned och radtaggar, om det inte finns tillräckligt med utrymme, flyttas till ny linje och är arrangerade uppifrån och ner och från vänster till höger. Platsen för ett element på sidan beror på dess plats i koden: ju högre det är, desto tidigare placeras det. Vart och ett av blockelementen ser ut som en rektangel som trycker undan sina grannar. Du kan ändra detta beteende med hjälp av speciella egenskaper. Att justera vissa block mot mitten eller sidorna av en container i CSS kallas positionering.

Placeringen av block kan styras med hjälp av absolut och relativ positionering. Positionering används för att ge stora delar av en sida en specifik plats, för att skapa komplexa gränssnitt, popup-fönster och dekorativa element. Den huvudsakliga egenskapen som används för att placera block i CSS är position. Den har fyra huvudegenskaper:

relativ;
absolut;
fast;
statisk.

Med deras hjälp kan du byta layoutlägen genom att ange en av fyra parametrar: topp, höger, botten eller vänster. Det finns också en egenskap för att beställa lager - z-index. Positionering med den statiska egenskapen används vanligtvis inte eftersom den anger standardpositioneringen av block. Därför påverkar användningen av några parametrar det inte på något sätt. De övriga tre egenskaperna används för layout: relativ, absolut, fix.

Relativ positionering av block i CSS, det vill säga positionen: relativ egenskap, innebär att ett element kan flyttas och dess ursprungliga position ändras. Ett sådant block finns fortfarande kvar i strömmen. I själva verket är det inte han själv som är fördriven, utan hans kopia. Fastighetsvärden är inställda för att indikera exakt hur mycket blocket kommer att röra sig i en eller annan riktning. De mäts oftast i pixlar. Men det är acceptabelt att använda andra enheter.

Den översta egenskapen flyttar en kopia av ett visst block uppåt eller nedåt med antalet pixlar som anges i egenskapen. När du använder det förblir element som ligger under eller ovanför på sina ställen, eftersom blocket som skiftas faktiskt inte rör sig någonstans heller.

Den nedre egenskapen flyttar blocket i motsatt riktning till den översta egenskapen. Ett positivt värde hjälper till att flytta det uppåt, och ett negativt värde hjälper till att flytta det ner. Höger och vänster egenskaper flyttar elementet till höger respektive vänster. Genom att kombinera dem alla kan du ställa in den exakta platsen för blocket på sidan, flytta det längs de vertikala och horisontella koordinataxlarna. Om du ökar indragen, kommer de att beräknas inte från kanten av själva blocket, utan från dess kopia offset åt sidan.

Den absoluta positioneringen av block i CSS specificeras av värdet på egenskapen absolut position. Ett element som är placerat faller absolut ur dokumentflödet och dess plats tas av angränsande block. Bredden på ett sådant element sträcks beroende på dess innehåll, och det kan ändras genom att ställa in vissa värden för egenskaperna upptill, vänster, höger, botten. Absolut positionering av block i CSS är användbar för rubriker. Men position: absolut fungerar inte bara för blockelement, utan också för inline-element.

Ett placerat absolut inline-element kommer att bete sig exakt likadant som ett inline-element. Därför kan positionering även användas för att styra text i CSS. Du kan använda några nya egenskaper på den, till exempel ändra höjd och bredd. Centrering och vertikal justering i CSS använder en kombination av flera egenskaper. Styr den vertikala justeringen av den översta egenskapen. Om du vill centrera ett block i CSS, bör huvudbehållaren vara relativt placerad och det justerade elementet ska vara absolut positionerat. Behållaren måste ställa in den översta egenskapen: 50%, och för att flytta elementet med halva sin egen höjd, använd translate-egenskapen med värdet "0, -50%". Absolut placerade element kan urskiljas i ny typ, eftersom de har egenskaper som inte är tillgängliga för andra typer av positionering.

De vänstra, övre, högra och nedre egenskaperna fungerar annorlunda på absolut och relativt placerade element. För relativa element sätter dessa egenskaper offset i förhållande till var elementet är placerat. Absolut placerade upptar en plats i förhållande till ett specifikt koordinatsystem kopplat till storleken på webbläsarfönstret. Utgångspunkterna för detta system är hörnen av fönstret. När du använder den vänstra egenskapen kommer indraget att räknas från vänster sida av webbläsaren, men det kommer inte att finnas någon rullningslist. Egenskapen top, när den är placerad absolut, anger förskjutningen från toppen av webbläsaren till toppen av elementet som den tillämpas på. Genom att kombinera båda egenskaperna kan elementet flyttas i förhållande till webbläsarens övre vänstra hörn.

På samma sätt, med hjälp av egenskaperna till höger och överst, kan du trycka ett element till höger sida av webbläsarfönstret och ändra dess vertikala position, flytta det till det övre högra hörnet. Om den rätta egenskapen är inställd på ett negativt värde kommer blocket att flytta utanför fönstergränsen. Efter detta bör en rullningslist visas. För att flytta ett element nedåt, använd egenskapen nederst. Den anger indraget från nederkanten av webbläsarfönstret till blockets nedre kant. Om dess värde är negativt visas också en rullningslist när elementet flyttas bortom den nedre kanten av webbläsarfönstret.

Som standard är alla element som ges absolut positionering knutna till ett koordinatsystem - webbläsarfönstret. Men det kan ändras genom att ge något överordnat element relativ positionering. Sedan ändrar barnblocket sin plats beroende på föräldern. Om det bland de överordnade elementen finns flera med relativ positionering, utförs räkningen från den närmaste av dem. I det här fallet kommer standardpositioneringen att vara från det som anges i body-taggen.

Innan ett element fick absolut positionering kallades det på något ställe ett implicit ursprung. Om ett sådant block inte ges egenskaper kommer det inte att flyttas. Du kan flytta den genom att ställa in egenskapen marginal. Det kommer att fungera på samma sätt som positioneringsegenskaperna. Om du inte definierar värdet på den vänstra egenskapen och alla andra, kommer det att vara lika med auto. Du kan också använda auto för att återställa element till sina ursprungliga platser.

Ett annat värde är fast. Positionsegenskapen förankrar ett element på en specifik plats. Fast positionering används ofta för att skapa menyer i CSS. Det liknar absolut, men det fasta blocket faller ut ur flödet. Även när du rullar på sidan kommer ett sådant element att förbli på plats, så det är bekvämt att använda det för att skapa en meny i CSS. Startpunkten kommer att vara knuten till webbläsarfönstret. Om det finns flera placerade block används egenskapen z-index för att beställa dem. Med dess hjälp kan du överlappa relativa block med absoluta ettor om du ger dem motsvarande index, uttryckt som ett heltal. Ju större den är, desto högre blir blocket.

Som du säkert redan vet kan du layouta en webbplats med hjälp av tabeller, i vilket fall sidan är uppdelad i celler. Du kan också använda block för dessa ändamål när en webbsida består av enskilda element.

Jag kommer förmodligen inte att missta mig om jag säger att ett allvarligt problem för många nybörjare webbansvariga är uppgiften att placera block på en given plats på en webbsida.

En av de största svårigheterna vid layout med block är placeringen (inriktningen) av samma block.

Jag tror att många av er har hört talas om en sådan sak som ett lager. Och som regel förstås ett lager som ett block som anges av taggen. Faktum är att allt är lite annorlunda.

Det finns inga lager i HTML. Det är bara en metafor. När vi pratar om om lager, då menar de en viss html-behållare (element) som kan placeras på en viss plats på en webbsida.

Den andra missuppfattningen är att endast klassificera blocket som anges av taggen som lager. Detta är inte heller sant. Dessa kan också inkludera stycken (

), listor (

Som nämnts ovan kan du ställa in platsen för vilket HTML-element som helst. Det finns ingen anledning att alltid använda taggen för detta. Användningen av denna tagg förpliktar dig inte heller att ge den någon position på webbsidan.

Innebörden av att använda ett block specificerat av en tagg beror på förstoring. När allt kommer omkring kan du placera andra element inuti den (stycken, bilder, etc.). Detta skapar ett stort block med varierat innehåll, som är mycket lättare att placera på en webbsida än varje element för sig.

Det finns fyra huvudtyper av positionering:

1. Statisk
2. Absolut
3. Fast
4. Släkting

Används som standardplats. I det här fallet visar webbläsaren html-kod, delar upp det i element och komponerar en sida från dem. Resultatet är en sekvens av ett antal element. De visas i den ordning som de anges i html-koden.

Att tillämpa de vänstra, övre, högra och nedre parametrarna ger inga resultat.

Statisk positionering måste hållas i åtanke när relativ positionering används.

Med absolut positionering specificeras koordinaterna för blockets övre vänstra hörn. I detta fall räknas koordinaterna i förhållande till platsen för det överordnade elementet. Om det överordnade elementet är ett webbläsarfönster, är blocket justerat relativt det. Om det finns ett annat element inom vilket blocket är beläget, sker inriktningen i förhållande till detta element.

Redan från namnet blir det tydligt att i detta fall är elementet fixat. Den finns på en specifik plats på webbsidan och rör sig inte någonstans. Denna justering används ofta för popup-fönster, där de är centrerade och inte rör sig när du rullar på sidan.

Denna typ av positionering kan vara svår. Dess namn är inte helt passande. Många människor blandar ihop relativ och absolut positionering av element. Det kan verka som om justeringen är relativ till det överordnade elementet. Och när det gäller absolut positionering - i förhållande till webbläsarfönstret. Men det är inte sant.

Det är nödvändigt att förstå att elementets placering i detta fall sker i förhållande till dess plats i en statisk position. Detta är vad som nämndes ovan.

Enkelt uttryckt säger du åt webbläsaren att flytta ett element så många pixlar i förhållande till var det är placerat som standard.

Det finns en annan svår punkt. Vad händer om det överordnade elementet har relativ positionering, men det kapslade elementet har absolut positionering? I detta fall koordinaträkningen barnelement kommer att utföras i förhållande till det överordnade elementet, med hänsyn till dess offset, om någon.

Så det finns en positionsegenskap. Den här egenskapen kan ha 4 värden Statisk, Absolut, Fast och Relativ. Standard är Statisk.

När du anger koordinater för ett element måste du också berätta för webbläsaren hur den ska beräkna dessa koordinater. Vi måste ge honom en utgångspunkt.

Glöm inte att om positionsegenskapen är frånvarande, kommer koordinaterna inte att beaktas, blocket kommer att förbli på samma plats, i sin statiska position.

För dessa ändamål används fyra typer av egenskaper:

1. Topp
2. Vänster
3. Rätt
4. Botten

Top - ett positivt värde (till exempel 20px) flyttar blocket 20 pixlar nedåt. Ett negativt värde (-20px) flyttar elementet 20 pixlar uppåt. Allt detta sker i förhållande till det övre vänstra hörnet.

Vänster - skift till vänster eller höger, beroende på tecken. I förhållande till det övre vänstra hörnet.

Höger - skift till höger och vänster, beroende på tecken. I förhållande till det övre högra hörnet.

Nederst - växla upp eller ner, beroende på skylten. Förekommer i förhållande till det nedre vänstra hörnet.

Här är HTML-koden:

Och detta är CSS:

#1 {
position:släkting;
top:100px;
vänster:100px;
bredd:500px;
höjd:500px;
bakgrundsfärg:#CCCCCC;
}

#11 {
bakgrundsfärg:#003399;
position:absolut;
botten: -30px;
höger: -50px;
bredd:100px;
höjd:100px;
}

#2 {
bakgrundsfärg:#990066;
bredd:200px;
höjd: 300px
}

Öva.

Medan jag skrev kom jag på det själv.

Vlad Merzhevich

Positionering är positionen för ett element i ett koordinatsystem. Det finns fyra typer av positionering: normal, absolut, fix och relativ. Beroende på typen, som ställs in genom positionsegenskapen, ändras också koordinatsystemet.

Tack vare kombinationen av egenskaperna position , left , top , right och bottom, kan ett element läggas över varandra, visas i en punkt med vissa koordinater, fixerade på en specificerad plats, bestämma positionen för ett element i förhållande till ett annat, etc. Liknar andra CSS-egenskaper Positioneringskontroll är tillgänglig via skript. Således kan du dynamiskt ändra positionen för element utan att ladda om sidan, skapa animationer och olika effekter.

Om ett elements positionsegenskap inte är inställt eller dess värde är statiskt , återges elementet i dokumentflödet som normalt. Med andra ord, element visas på sidan i den ordning de visas i källkod HTML.

Egenskaperna för vänster , topp , höger och botten ignoreras, om de definieras.

Med absolut positionering finns inte elementet i dokumentflödet och dess position ställs in i förhållande till kanterna på webbläsaren. Du kan ställa in denna typ genom det absoluta värdet av positionsegenskapen. Koordinaterna är specificerade i förhållande till kanterna på webbläsarfönstret, kallat det "synliga området" (Fig. 3.42).

Ris. 3,42. Vänster, höger, övre och nedre egenskapsvärden för absolut positionering

Läget kännetecknas av följande funktioner.

Lagrets bredd, om det inte uttryckligen anges, är lika med bredden på innehållet plus värdena för marginal, kant och utfyllnad.
Ett lager ändrar inte sin ursprungliga position om det inte har egenskaperna höger , vänster , topp och botten.
De vänstra och övre egenskaperna har företräde framför de högra och nedre egenskaperna. Om vänster och höger motsäger varandra, ignoreras värdet av höger. Detsamma gäller botten.
Om vänster är inställt på ett negativt värde kommer lagret att gå utanför webbläsarens vänstra kant och rullningslisten visas inte. Detta är ett sätt att dölja ett element. Detsamma gäller för den översta egenskapen, endast lagret kommer att gå bortom den övre kanten.
Om vänster ställ in värdet mer bredd synligt område eller ange höger med ett negativt värde, den horisontell rand rulla. En liknande regel fungerar med top , bara vi pratar om en vertikal rullningslist.
Samtidigt bildar de angivna egenskaperna för vänster och höger lagrets bredd, men bara om bredd inte anges. När du har lagt till egenskapen width ignoreras det rätta värdet. Samma sak kommer att hända med höjden på lagret, endast egenskaperna topp , botten och höjd är inblandade.
Ett absolut positionerat element flyttas med dokumentet när det rullar.

Positionsegenskapen, inställd på absolut, kan användas för att skapa en rameffekt. Förutom absolut positionering måste element ha en overflow-egenskap inställd på auto . Sedan, när innehållet överstiger höjden på det synliga området, visas en rullningslist. Höjden och bredden på "ramarna" genereras automatiskt av samtidig användning egenskaper vänster , höger för bredd och topp , botten för höjd (exempel 3.31).

Exempel 3.31. Skapa en analog av ramar

Absolut positioneringskropp ( marginal: 0; ) #sidebar, #content (position: absolut; ) #sidebar, #content ( overflow: auto; padding: 10px; ) #header (höjd: 80px; /* Lagerhöjd */ bakgrund: #FEDFC0; border-bottom: 2px solid #7B5427; ) #header h1 (utfyllnad: 20px; marginal: 0; ) #sidebar (bredd: 150px; bakgrund: #ECF5E4; border-höger: 1px solid #231F20; topp: ; /* Avstånd från överkanten */ botten: 0 /* Avstånd från botten */ ) #content ( topp: 82px; /* Avstånd från överkanten */ vänster: 170px; /* Avstånd från vänsterkanten */ botten: 0 ; höger: 0 ) Pilaf av världens folk

Pilaf i Fergana stil

uzbekisk pilaff

Sibirisk pilaff

Italiensk pilaff

Estnisk pilaff

Pilaff i amerikansk stil

Indisk stil pilaff

Lägg köttet skuret i bitar i en kittel och stek det tills det bildas en skorpa. Fräs löken, hackad i ringar, tillsammans med köttet tills det är rödaktigt, tillsätt sedan morötterna, skurna i strimlor. Tillsätt hälften av saltet, blanda allt och stek tills morötterna blir gyllenbruna. Efter detta, häll hälften av den nödvändiga mängden vatten och låt det koka.

Täck riset i ett jämnt lager, öka värmen och häll genast i vatten så att det täcker riset med 1–1,5 cm Så fort vattnet har avdunstat, använd en hålslev för att samla pilaffen i en hög i mitten. , genomborra den med en pinne på flera ställen så att vattnet på ytan, gick till botten. Täck sedan över pilaffen och låt den vila i 20–25 minuter.

Blanda den färdiga pilaffen noggrant, överför till en stor skål och lägg köttet ovanpå.

Resultatet av detta exempel visas i fig. 3,43. Rubriklagret renderas i flödet som vanligt, och sidofältet och innehållslagren är inställda på absolut positionering.

Ris. 3,43. Tillämpa absolut positionering

I IE6 kan absolut placerade element inte ha egenskaper för vänster , höger och topp , botten samtidigt.

Absolut positionering används också för att skapa olika effekter, till exempel fotoverktygstips. Till skillnad från taggens titelattribut som också visar verktygstipstexten, genom stilar kan du styra vilken typ av text som visas med hjälp av skriptet.

Låt oss först skapa ett tomt lager med identifieraren floatTip och definiera dess stil. Tre stilegenskaper måste krävas - position med värdet absolut , visning med värdet ingen döljer lagret och width anger bredden på lagret med ett verktygstips. De återstående egenskaperna används på begäran av utvecklaren och är avsedda att ändra utformningen av lagret (exempel 3.32).

Exempel 3.32. Verktygstips stil

#floatTip ( position: absolut; /* Absolut positionering */ bredd: 250px; /* Blockbredd */ display: ingen; /* Döljer sig från displayen */ kantlinje: 1px fast #000; /* Ramparametrar */ utfyllnad: 5px ; /* Marginaler runt text */ font-family: sans-serif /* Chained font */ font-size: 9pt /* Teckenstorlek */ färg: #333; /* Bakgrundsfärg */ )

Själva skriptet består av två funktioner - moveTip() spårar musrörelser och ändrar positionen för lagret i enlighet med markörkoordinaterna, och toolTip() styr synligheten av lagret och visar önskad text i det (exempel 3.33).

Exempel 3.33. Lagerutmatningsskript

Document.onmousemove = moveTip; funktion moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Layer width // För IE-webbläsare if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // För andra webbläsare ) else ( x = e.pageX; // X-koordinat för markören y = e.pageY; // Y-koordinat för markören ) Visa lagret till höger om markören om ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

För bekvämlighet och mångsidighet bör skriptet placeras i en separat fil och kopplas via taggens src-attribut. Den slutliga koden visas i exempel 3.34.

Exempel 3.34. Skapa ett verktygstips

Verktygstips #floatTip (position: absolut; bredd: 250px; display: ingen; kant: 1px fast #000; stoppning: 5px; font-family: sans-serif; font-size: 9pt; färg: #333; bakgrund: # ECF5E4 ; opacitet: 0,85;

" + "Lens: Canon EF 24-105 f/4L IS USM
" + "Flash: Canon Speedlite 580 EX
" + "Slutartid: 1/125
Bländare: 5,6")" onmouseout="toolTip()" />

Resultatet av detta exempel visas i fig. 3,44. Observera att textbrytning när du anropar funktionen toolTip() är för läsbarhetssyften och är i JavaScript-syntax. I Safari fungerar skriptet ibland inte vid radbrytning av text, i så fall bör texten skrivas på en rad. En CSS3-opacitetsegenskap har lagts till stilar, vilket ger lagret en liten genomskinlighet. Den här egenskapen stöds inte i IE före version 9.0.

Ris. 3,44. Verktygstips renderat med JavaScript

Den fasta positionen för ett lager specificeras av positionsegenskapens fasta värde och liknar i sin effekt absolut positionering. Men till skillnad från den binder den till den punkt på skärmen som anges av egenskaperna för vänster , topp , höger och nedre och ändrar inte sin position när du rullar webbsidan. En annan skillnad mot absolut är att när ett fast lager går utanför det synliga området till höger eller under det, visas inga rullningslister.

Denna typ av positionering används för att skapa menyer, flikar, rubriker, i allmänhet, alla element som ska fixas på sidan och alltid vara synliga för besökaren. Exempel 3.35 visar hur man lägger till en sidfot som finns kvar på ett ställe oavsett mängden information på webbplatsen.

Exempel 3.35. Fast källare

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Fast sidfot BODY ( margin-bottom: 50px; ) #footer ( position: fixed; /* Fast position */ left: 0; bottom: 0; /* Nedre vänstra hörnet */ utfyllnad: 10px; /* Marginaler runt text */ bakgrund: #39b54a; /* Bakgrundsfärg */ färg: #fff; Författaren garanterar inte din säkerhet när du använder dem och frånsäger sig allt ansvar för resultaten.

Kom ihåg att ett lejon är ett rovdjur och ett farligt djur!

Vlad Merzhevich

Ris. 3,45. Sidfot längst ner på sidan

Relativ positionering

Om du ställer in egenskapen position till relativ ställer du in elementets position i förhållande till dess ursprungliga plats. Om du lägger till egenskaperna för vänster , övre , höger och nedre ändras elementets position och flyttas det till en eller annan sida från dess ursprungliga plats. Ett positivt vänstervärde anger en förskjutning till höger från elementets vänstra kant, ett negativt värde specificerar en förskjutning till vänster. Ett positivt värde på topp anger en nedåtgående förskjutning av elementet (Fig. 3.46), ett negativt värde specificerar en förskjutning uppåt.

Ris. 3,46. Vänster och översta egenskapsvärden för relativ positionering

De nedre och högra egenskaperna har motsatt effekt. Med ett positivt värde skiftar höger elementet till vänster om dess högra kant, med ett negativt värde skiftar det till höger (Fig. 3.47). Ett positivt bottenvärde flyttar elementet uppåt, ett negativt bottenvärde flyttar det nedåt.

Ris. 3,47. Höger och nedre egenskapsvärden för relativ positionering
Relativ positionering kännetecknas av följande egenskaper.

Exempel 3.36 visar rubriktext som flyttas nedåt för att ge den en annan skrivstil.

Exempel 3.36. Textens rubrik

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rubrik H1 ( teckensnitt: fet 2em Arial, Tahome, sans-serif; /* Teckensnittsalternativ */ färg: #fff; bakgrund: #375D4C; utfyllnad: 0 10px; ) H1 SPAN (position: relativ; /* Relativ positionering */ top: 0,3em; /* Flytta ner */ ) A och bokar av typsnittsvetenskap

Ett typsnitt är ett sätt att uttrycka design, inte någon form av banal läsning.

Resultatet av detta exempel visas i fig. 3,48.

Ris. 3,48. Flytta text i förhållande till dess ursprungliga position

Vanligtvis används inte själva relativa positioneringen ofta, eftersom det finns ett antal egenskaper som har i huvudsak samma roll, till exempel samma marginal . Men kombinationen olika typer Positionering för kapslade lager är en av de bekväma och praktiska layoutteknikerna. Om du ställer in relativ för det överordnade elementet och absolut för det underordnade elementet, så ändras koordinatsystemet och positionen för det underordnade elementet indikeras i förhållande till dess förälder (Fig. 3.49).

Ris. 3,49. Vänster, höger, övre och nedre egenskapsvärden i kapslade lager

Koordinaterna räknas från innerkant gränser, fältvärden beaktas inte. Följande exempel placerar text i det nedre högra hörnet av lagret nära gränsen, utan att utfyllnadsegenskapen ignoreras.

Text för tabelltaggen, och tabellcell är td. Tips: på i detta exempel Det är intressant att se hur bilden beter sig när storleken på webbläsarfönstret minskas.

Hur man justerar text till höger

Kort text till höger .raz ( text-align: right; ) Kort text till höger .raz ( marginal: 0; border-top: solid 2px; utfyllnad: 0; overflow: auto;/* klar flyt */ /* */ ) .raz li ( rensa: båda; ) .raz span ( flyta: höger; blanksteg: nurap;

) Relaterat material:
horisontell html-justering uppdaterad
html motivering vill uppdatera
Hur man riktar ett block till höger .raz div (maxbredd: 8em;/* block upptar bredden på föräldern, max-width begränsar den */
min-höjd: 2em;
marginal-vänster: auto; marginal-höger: 0 ; HTML-kod Elementet påverkar inte höjden eller bredden på föräldern och får den inte heller att svämma över. .raz (position: relativ; stoppning-höger: 8em;/* så att elementet inte ligger ovanpå förälderns innehåll */
) .raz div (position: absolut;
topp: 0 ; /* block upptar bredden på innehållet, max-width begränsar det */ max-bredd: 8em;
min-höjd: 2em; kant: 1px fast orange; bakgrund: #fff5d7; ) HTML-kod Text .raz ( text-align: höger; ) .raz div ( display: inline-block;/* inline-block tar upp bredden på innehållet, max-width begränsar det */
max-bredd: 8em;
min-höjd: 2em;
min-höjd: 2em; kant: 1px fast orange; text-align: start; kant: 1px fast orange;/* ta bort textjusteringsarv */
bakgrund: #fff5d7; ) HTML-kod Hur man justerar flera block till höger.raz div ( bredd: 8 em; max-bredd: 100 %; min-höjd: 2 em; kant: 1 px fast orange; bakgrund: #fff5d7; )
/* cm. .raz ( text-align: right; ) Kort text till höger .raz ( marginal: 0; border-top: solid 2px; utfyllnad: 0; overflow: auto; bredd: 8em; max-bredd: 100 %; min-höjd: 2em;