Kan Position:absolute; användas för mycket ?

Permalänk
Medlem

Kan Position:absolute; användas för mycket ?

Hej!
Jag håller på med en hemsida för första gången men börjar få rätt bra koll på html och css. (tycker jag själv iaf)
Det jag undrar då jag läst några som skrivit att man inte ska använda position:absolute; som positionering i css för mycket.

Är detta sant då jag använder det till allt i stort sett när det gäller positionering av classer och bilder ?

Jag får inte sidan att funka i olika upplösningar kan det vara anledningen ?

Väldigt tacksam för svar!

Visa signatur

Asus P8P67 B3, Asus GTX 660, A-data 8GB minne 1600mhz, Intel 2600K, Samsung ssd 830 256gb
sidewinder 4, Corsair ax 850, Samsung galaxy s4 snart, Windows 8.

Permalänk
Medlem

jag är inte kung på CSS men om du går ju utanför sidlayoutens standardflöde, så det kan nog ställa till problem med olika upplösningar om man inte är försiktig.
En sak som kan vara bra att veta (om du inte redan vet det) angående absolut positionering, om du sätter ett föräldraelement till "position: relative", så kommer ditt absolutpositionerade element att anpassa sig utifrån detta föräldraelement ist för webbläsarfönstret.

Permalänk
Medlem

Jag som jobbar med detta tycker helt klart att man ska undvika absolute, och till viss del även relative.
Det finns undantag helt klart, men i regel bör de inte användas.
Och du ska absolut inte positionera yttersta elemeten med absolut, för då kommer sidan med stor sannolikhet att bete sig skumt i andra upplösningar än den du kör med.

Nä, kör med floats och margin, det räcker nästan alltid.

Visa signatur

...

Permalänk
Medlem
Skrivet av Hal0:

Jag som jobbar med detta tycker helt klart att man ska undvika absolute, och till viss del även relative.
Det finns undantag helt klart, men i regel bör de inte användas.
Och du ska absolut inte positionera yttersta elemeten med absolut, för då kommer sidan med stor sannolikhet att bete sig skumt i andra upplösningar än den du kör med.

Nä, kör med floats och margin, det räcker nästan alltid.

Tack för era svar!
Det känns mycket enklare att använda postition: absolute för att få grejerna dit jag vill så därför jag använde den.

Men då vet jag då är det bara att köra på floats och margin i stället då.

Visa signatur

Asus P8P67 B3, Asus GTX 660, A-data 8GB minne 1600mhz, Intel 2600K, Samsung ssd 830 256gb
sidewinder 4, Corsair ax 850, Samsung galaxy s4 snart, Windows 8.

Permalänk
Medlem

Att använda absolute för positionering är ungefär som att använda tabeller.
Allt ser jättebra ut på din skärm, men sidan ser annorlunda ut för alla andra, och så fort man ska göra någon ändring på sidan så är det oftast jävligt jobbigt.
Men som du säger, det är enkelt, men det är bättre att du lär dig bygga sidor på ett korrekt sätt.

Visa signatur

...

Permalänk
Medlem

Det går alldeles utmärkt att använda position: absolute.

Men det skall användas vid rätt tillfälle då du vill säkerställa att en sak hamnar absolut där du vill ha den.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem
Skrivet av Hal0:

Att använda absolute för positionering är ungefär som att använda tabeller.
Allt ser jättebra ut på din skärm, men sidan ser annorlunda ut för alla andra, och så fort man ska göra någon ändring på sidan så är det oftast jävligt jobbigt.
Men som du säger, det är enkelt, men det är bättre att du lär dig bygga sidor på ett korrekt sätt.

Inte världens bästa jämförelse kanske, problemet med att folk använde(r?) tabeller till layout var väl i grunden att man gick helt ifrån elementets ursprungssyfte.

Skrivet av BlueEyes:

Det går alldeles utmärkt att använda position: absolute.

Men det skall användas vid rätt tillfälle då du vill säkerställa att en sak hamnar absolut där du vill ha den.

Och att man vet att alla användare kommer använda samma upplösning, antar jag.
Om man tar ett scenario:
Låt säga att du lägger ett element absolut positionerat 10px från högerkanten på ditt fönster, allt ser frid och fröjd ut i webbläsaren på din skrivbordsskärm med upplösning 1920x1080. Om nu en användare med, låt säga smartphone med upplösning 480x800, besöker din sida. Då kommer ditt element åter igen positionera sig 10px från högerkanten. Problemet som nu kan uppstå är att ditt absolut positionerade element börjar flyta ovanpå de element som förhåller sig till layoutens standardflöde, eftersom den enbart förhåller sig till 10px från högerkanten.

Rätta mig jättegärna om jag är ute och cyklar, men detta är väl min tanke om det hela.

Permalänk
Medlem
Skrivet av Hal0:

Att använda absolute för positionering är ungefär som att använda tabeller.
Allt ser jättebra ut på din skärm, men sidan ser annorlunda ut för alla andra, och så fort man ska göra någon ändring på sidan så är det oftast jävligt jobbigt.
Men som du säger, det är enkelt, men det är bättre att du lär dig bygga sidor på ett korrekt sätt.

Ja precis, jag har märkt när jag kollat med annan upplösning att grejerna åker in i varandra och då läste jag att man skulle använda em istället för px men det gjorde ingen skillnad. Så det har väl med att jag använder position istället för margin..

Jätte tack för dina svar!

Visa signatur

Asus P8P67 B3, Asus GTX 660, A-data 8GB minne 1600mhz, Intel 2600K, Samsung ssd 830 256gb
sidewinder 4, Corsair ax 850, Samsung galaxy s4 snart, Windows 8.

Permalänk
Medlem
Skrivet av materka:

Inte världens bästa jämförelse kanske, problemet med att folk använde(r?) tabeller till layout var väl i grunden att man gick helt ifrån elementets ursprungssyfte.

Och att man vet att alla användare kommer använda samma upplösning, antar jag.
Om man tar ett scenario:
Låt säga att du lägger ett element absolut positionerat 10px från högerkanten på ditt fönster, allt ser frid och fröjd ut i webbläsaren på din skrivbordsskärm med upplösning 1920x1080. Om nu en användare med, låt säga smartphone med upplösning 480x800, besöker din sida. Då kommer ditt element åter igen positionera sig 10px från högerkanten. Problemet som nu kan uppstå är att ditt absolut positionerade element börjar flyta ovanpå de element som förhåller sig till layoutens standardflöde, eftersom den enbart förhåller sig till 10px från högerkanten.

Rätta mig jättegärna om jag är ute och cyklar, men detta är väl min tanke om det hela.

Tack för ditt svar!
Ja det är precis så det blir att allt lägger sig på varandra när man drar ner upplösningen.

Räcker det att man använder margin och float eller finns det fler knep för att få sidan att se likadan ut i olika upplösningar så jag inte gör fler fel ?
Är det tex bättre att använda em istället för px ? Gör det nån skillnad för hur den ser ut i olika upplösningar ?

Visa signatur

Asus P8P67 B3, Asus GTX 660, A-data 8GB minne 1600mhz, Intel 2600K, Samsung ssd 830 256gb
sidewinder 4, Corsair ax 850, Samsung galaxy s4 snart, Windows 8.

Permalänk
Medlem
Skrivet av speedway:

Tack för ditt svar!
Ja det är precis så det blir att allt lägger sig på varandra när man drar ner upplösningen.

Räcker det att man använder margin och float eller finns det fler knep för att få sidan att se likadan ut i olika upplösningar så jag inte gör fler fel ?
Är det tex bättre att använda em istället för px ? Gör det nån skillnad för hur den ser ut i olika upplösningar ?

Vill du ha exakta resultat på dimensioner så ska du köra med px. Om du vill att sidan ska skala bra med textstorlek använd em. Förövrigt är det väl lättare att positionera med float och margin än med position absolute? Varför krångla till det?

Visa signatur

Intel i7 2600K @ 4.5GHz | GeForce GTX 680 | ASUS P8P67 PRO | Corsair Dominator 16GB 1600MHz | Samsung 830 256GB

Permalänk
Medlem
Skrivet av elius:

Vill du ha exakta resultat på dimensioner så ska du köra med px. Om du vill att sidan ska skala bra med textstorlek använd em. Förövrigt är det väl lättare att positionera med float och margin än med position absolute? Varför krångla till det?

Okey tack då vet jag!

Ja det är mycket möjligt. Jag började med position: först så är väl bara mer van vid det...
Är ju inget krångligt med float och margin heller.

Visa signatur

Asus P8P67 B3, Asus GTX 660, A-data 8GB minne 1600mhz, Intel 2600K, Samsung ssd 830 256gb
sidewinder 4, Corsair ax 850, Samsung galaxy s4 snart, Windows 8.

Permalänk
Medlem

Jag är systemarkitekt som jobbat i flera år med avancerade front-end-lösningar. Svaret på din fråga är att när man WF/designar en webbplats, vill man om möjligt använda tekniker som möjliggör flexibilitet. Om man inte har den möjligheten (på grund av budget eller krav på att följa en strikt grafisk profil), är position: absolute; en väldigt bra teknik som inte kan användas för mycket (så länge det används rätt).

Det finns en jätteviktig tumregel: Använd bara position:absolute i en absolut miljö. Det betyder att man sätter upp sidans struktur med exempelvis floats, men att man sedan sätter position:relative på ytor som har fasta storlekar. Detta för att då kunna styra innehållet på pixelnivå med position:absolute inuti denna yta. Om man sätter upp en yta som varierar i höjd eller bredd, måste man tänka till för att inte förstöra för framtiden.

Ytor som kan variera i både höjd och bredd är ofta olämpliga att använda absolut positionering inuti, med undantag för om det går att applicera en min-width/min-height. Det är heller inte ovanligt att man använder en variabel höjd och statisk/relativ positionering inuti en yta som har position:absolute, ett exempel på detta är när ytan innehåller text som kanske renderats från ett CM-verktyg.

Observera att det är svårt att ge generella svar som gäller i alla situationer. Men om man utvecklar en stor och grafiskt komplex webbplats kan man i slutändan tjäna hundratals timmar på att använda absolut positionering. Detta gäller framför allt när man bygger mycket animationer och anpassade UI-element. Men på en hobbynivå bör man definitivt lära sig både absolut och statisk/relativ positionering för att få en förståelse nog att välja det ena eller andra vid rätt tillfälle.

Permalänk
Medlem
Skrivet av azoapes:

Jag är systemarkitekt som jobbat i flera år med avancerade front-end-lösningar. Svaret på din fråga är att när man WF/designar en webbplats, vill man om möjligt använda tekniker som möjliggör flexibilitet. Om man inte har den möjligheten (på grund av budget eller krav på att följa en strikt grafisk profil), är position: absolute; en väldigt bra teknik som inte kan användas för mycket (så länge det används rätt).

Det finns en jätteviktig tumregel: Använd bara position:absolute i en absolut miljö. Det betyder att man sätter upp sidans struktur med exempelvis floats, men att man sedan sätter position:relative på ytor som har fasta storlekar. Detta för att då kunna styra innehållet på pixelnivå med position:absolute inuti denna yta. Om man sätter upp en yta som varierar i höjd eller bredd, måste man tänka till för att inte förstöra för framtiden.

Ytor som kan variera i både höjd och bredd är ofta olämpliga att använda absolut positionering inuti, med undantag för om det går att applicera en min-width/min-height. Det är heller inte ovanligt att man använder en variabel höjd och statisk/relativ positionering inuti en yta som har position:absolute, ett exempel på detta är när ytan innehåller text som kanske renderats från ett CM-verktyg.

Observera att det är svårt att ge generella svar som gäller i alla situationer. Men om man utvecklar en stor och grafiskt komplex webbplats kan man i slutändan tjäna hundratals timmar på att använda absolut positionering. Detta gäller framför allt när man bygger mycket animationer och anpassade UI-element. Men på en hobbynivå bör man definitivt lära sig både absolut och statisk/relativ positionering för att få en förståelse nog att välja det ena eller andra vid rätt tillfälle.

Tack så mycket för ditt svar!
Väldigt bra förklarat och det kommer jag ha stor nytta av.

Visa signatur

Asus P8P67 B3, Asus GTX 660, A-data 8GB minne 1600mhz, Intel 2600K, Samsung ssd 830 256gb
sidewinder 4, Corsair ax 850, Samsung galaxy s4 snart, Windows 8.