{"id":91877,"date":"2022-10-12T07:40:37","date_gmt":"2022-10-12T12:40:37","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/forsta-css-positionsegenskapen-med-praktiska-exempel\/"},"modified":"2022-10-12T07:40:37","modified_gmt":"2022-10-12T12:40:37","slug":"forsta-css-positionsegenskapen-med-praktiska-exempel","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/forsta-css-positionsegenskapen-med-praktiska-exempel\/","title":{"rendered":"F\u00f6rst\u00e5 CSS-positionsegenskapen med praktiska exempel"},"content":{"rendered":"
\n

Vill du f\u00f6rb\u00e4ttra dina designkunskaper och f\u00f6rb\u00e4ttra anv\u00e4ndarupplevelsen p\u00e5 din webbplats? Det \u00e4r l\u00e4ttare med en fullst\u00e4ndig f\u00f6rst\u00e5else f\u00f6r de olika CSS-metoderna f\u00f6r att placera element. Du kan bygga en fantastisk webbsida med en grundl\u00e4ggande f\u00f6rst\u00e5else f\u00f6r webbdesign. Men huvudproblemet uppst\u00e5r n\u00e4r ditt webbprojekt blir mer detaljorienterat, s\u00e4rskilt om det kr\u00e4ver komplex anpassning av element p\u00e5 sidan.<\/p>\n

Lyckligtvis kan du f\u00f6rb\u00e4ttra din webbplats funktionalitet och p\u00e5skynda ditt arbetsfl\u00f6de genom att anv\u00e4nda korrekt CSS-positionering. L\u00e5t oss utforska olika CSS-positioneringsegenskaper och granska de olika layouterna du kan anv\u00e4nda f\u00f6r att skapa en modern webbsida.<\/p>\n

<\/span> Vad \u00e4r egenskapen f\u00f6r CSS-position?<\/span><\/h2>\n

CSS placera<\/strong> egenskap definierar positionen f\u00f6r ett element. Du kan manipulera platsen f\u00f6r ett element med v\u00e4nster<\/strong>, h\u00f6ger<\/strong>, topp<\/strong>, botten<\/strong>, och z-index<\/strong> egenskaper. \u00c4ven om du kan anv\u00e4nda CSS Flexbox eller CSS Grid f\u00f6r att skapa symmetriska webbplatser, hj\u00e4lper positionsegenskaper dig att bygga asymmetriska webbplatser genom att ta bort varje element fr\u00e5n andra element.<\/p>\n

Med andra ord, egenskapen CSS position till\u00e5ter element att r\u00f6ra sig fritt i ett dokument.<\/p>\n

Syntaxen f\u00f6r CSS-positionsegenskapen \u00e4r:<\/p>\n

position: value;<\/pre>\n
H\u00e4r \u00e4r de fem v\u00e4rden som positionsegenskapen kan ta:<\/p>\n
        statisk relativ absolut fast klibbig  <\/ol>\n
    OBS: Du kan placera element med hj\u00e4lp av egenskaperna f\u00f6r v\u00e4nster, h\u00f6ger, topp och botten.  Men dessa egenskaper beter sig olika, beroende p\u00e5 positionens v\u00e4rde.<\/p>\n
    <\/span>  CSS statisk positionering<\/span><\/h2>\n
    Statisk \u00e4r standardpositionen f\u00f6r HTML-element.  L\u00e5t oss titta p\u00e5 n\u00e5gra exempel p\u00e5 HTML f\u00f6r att f\u00f6rst\u00e5 det:<\/p>\n
    <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>CSS Position Property<\/title><link rel=\"stylesheet\" href=\"https:\/\/ipotek.net\/forsta-css-positionsegenskapen-med-praktiska-exempel\/style.css\"><\/head><body><div class=\"parent_container utility-flex\"><div class=\"child_1 utility-flex\">Child 01<\/div><div class=\"child_2 utility-flex\">Child 02<\/div><div class=\"child_3 utility-flex\">Child 03<\/div><\/div><\/body><\/html><\/pre>\n
    Vi har placerat tre barn i en f\u00f6r\u00e4ldracontainer.  Vi kommer att anv\u00e4nda det h\u00e4r exemplet f\u00f6r att leka med de olika positionsegenskaperna.  H\u00e4r \u00e4r bas-CSS som vart och ett av v\u00e5ra exempel kommer att anv\u00e4nda:<\/p>\n
    .utility-flex {display: flex;justify-content: center;align-items: center;}
    .parent_container {background: rgb(255, 187, 98);padding: 10px;width: 600px;height: 400px;}<\/p>
    .child_1,.child_2,.child_3 {font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande','Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-weight: 600;background: #e961ee;border: 5px solid rgb(255, 255, 255);width: 300px;height: 100px;color: rgb(238, 238, 238);border-radius: 5px;margin: 5px;}<\/p><\/pre>\n
    Nu, l\u00e5t oss l\u00e4gga till position: statisk till det andra barnet med botten och h\u00f6ger egenskaper.<\/p>\n
    .child_2 {position: static;bottom: 40px;right: 50px;border: 8px solid purple;}<\/pre>\n
    H\u00e4r \u00e4r resultatet:<\/p>\n
    \n<\/figure>\n
      Som du kan se g\u00e4ller gr\u00e4nsegenskapen men det \u00e4r ingen skillnad i den andra underordnade placeringen.  Om du inte anv\u00e4nder en CSS-positionsegenskap kommer den att ha statisk som standardv\u00e4rde.  Detta positionerar ett element enligt standardsidfl\u00f6det.  Alla element med en statisk position ignorerar egenskaperna f\u00f6r v\u00e4nster, h\u00f6ger, topp, botten och z-index.<\/p>\n
    <\/span>  CSS relativ positionering<\/span><\/h2>\n
    N\u00e4r du till\u00e4mpar relativ positionering kommer ett element initialt att bete sig p\u00e5 samma s\u00e4tt som f\u00f6r statisk positionering.  Men nu kommer egenskaperna f\u00f6r v\u00e4nster, h\u00f6ger, topp, botten och z-index att fungera genom att flytta det valda elementet fr\u00e5n dess ursprungliga position i den angivna riktningen.<\/p>\n
    L\u00e5t oss \u00e4ndra positionsv\u00e4rdet f\u00f6r det andra barnet fr\u00e5n statiskt till relativt med samma topp- och bottenegenskaper som tidigare.<\/p>\n
    .child_2 {position: relative;bottom: 40px;right: 50px;border: 8px solid purple;}<\/pre>\n
    H\u00e4r \u00e4r resultatet:<\/p>\n
    \n<\/figure>\n
    Som du kan se f\u00f6rskjuts det andra barnet 40 px fr\u00e5n botten (mot toppen) och 50 px fr\u00e5n h\u00f6ger (mot v\u00e4nster).<\/p>\n
    <\/span>  CSS absolut positionering<\/span><\/h2>\n
    Alla element med absolut positionering tas bort fr\u00e5n dokumentets normala fl\u00f6de.  Andra element kommer att bete sig som om det elementet inte finns i dokumentet.  Elementets slutliga position best\u00e4ms av egenskaperna f\u00f6r topp, botten, v\u00e4nster och h\u00f6ger.<\/p>\n
    Observera att ett element med absolut positionering \u00e4r placerat i f\u00f6rh\u00e5llande till dess n\u00e4rmaste positionerade (icke-statiska) f\u00f6rfader.  Om det inte finns n\u00e5gon positionerad f\u00f6rfader, placeras den i f\u00f6rh\u00e5llande till det initiala inneh\u00e5llsblocket.<\/p>\n
    L\u00e5t oss f\u00f6rst\u00e5 detta med tv\u00e5 exempel.  F\u00f6r det f\u00f6rsta, ett absolut positionerat barn utan n\u00e5gon positionerad f\u00f6rfader:<\/p>\n
    .parent_container {background: rgb(255, 187, 98);padding: 10px;width: 600px;height: 400px;margin: auto;}
    .child_2 {position: absolute;bottom: 190px;right: 500px;border: 8px solid purple;}<\/p><\/pre>\n
    H\u00e4r \u00e4r resultatet:<\/p>\n
    \n<\/figure>\n
    I det h\u00e4r andra exemplet har den \u00f6verordnade beh\u00e5llaren en icke-statisk position:<\/p>\n
    .parent_container {background: rgb(255, 187, 98);padding: 10px;width: 600px;height: 400px;margin: auto;position: relative;}
    .child_2 {position: absolute;bottom: 20px;right: 150px;border: 8px solid purple;}<\/p><\/pre>\n
    Barnet \u00e4r nu placerat i f\u00f6rh\u00e5llande till sin beh\u00e5llare:<\/p>\n
    \n<\/figure>\n
    <\/span>  CSS fast positionering<\/span><\/h2>\n
    Ett element med en fast position tas ocks\u00e5 bort fr\u00e5n dokumentets normala fl\u00f6de.  Det finns inget utrymme skapat f\u00f6r det elementet i hela sidlayouten.  Den \u00e4r placerad i f\u00f6rh\u00e5llande till det initiala inneh\u00e5llsblocket som st\u00e4llts in av viewporten (f\u00f6rutom n\u00e4r n\u00e5gon av dess f\u00f6rf\u00e4der har en filter-, transform- eller perspektivegenskap inst\u00e4lld p\u00e5 n\u00e5got annat v\u00e4rde \u00e4n inget).  De \u00f6vre, v\u00e4nstra, h\u00f6gra och nedre egenskaperna avg\u00f6r elementets slutliga position.<\/p>\n
    L\u00e5t oss justera v\u00e5rt befintliga exempel genom att l\u00e4gga till fler barn.  Tidigare har vi fixat f\u00f6r\u00e4ldracontainerns h\u00f6jd.  L\u00e5t oss ta bort den och st\u00e4lla in flex-direction: kolumn s\u00e5 att v\u00e5r flexbeh\u00e5llare \u00e4r tillr\u00e4ckligt stor f\u00f6r att scrolla ner och visualisera resultatet.  L\u00e4gg nu till fast positionsegenskap till det andra barnet som visas nedan:<\/p>\n
    .utility-flex {display: flex;flex-direction: column;justify-content: center;align-items: center;}
    .parent_container {background: rgb(255, 187, 98);padding: 10px;width: 600px;\/* height: 400px; *\/margin: auto;\/* position: relative; *\/}<\/p>
    .child_2 {position: fixed;bottom: 300px;right: 100px;border: 8px solid purple;}<\/p><\/pre>\n
    H\u00e4r \u00e4r resultatet:<\/p>\n
    \n<\/figure>\n
      S\u00e5 rullning p\u00e5verkar inte det andra barnets position alls.  Dess position \u00e4r fixerad i f\u00f6rh\u00e5llande till det ursprungliga inneh\u00e5llsblocket som st\u00e4llts in av visningsporten.  Ibland kan rullande element orsaka prestanda- och tillg\u00e4nglighetsproblem.  Du kan skapa en tillg\u00e4nglig webbplats med semantisk HTML och CSS.<\/p>\n
    <\/span>  CSS Sticky Positioning<\/span><\/h2>\n
    Ett element med klibbig positionering har blandade egenskaper av relativ och fast positionering.  Ett klibbigt placerat element kommer att f\u00f6lja relativa positioneringsegenskaper tills det passerar den specificerade tr\u00f6skeln.  Efter det kommer det att bete sig som om det vore fixat tills det n\u00e5r gr\u00e4nsen f\u00f6r sin f\u00f6r\u00e4lder.<\/p>\n
    Du kan ange tr\u00f6skeln med hj\u00e4lp av egenskaperna f\u00f6r v\u00e4nster, h\u00f6ger, \u00f6vre och nedre.  Utan en tr\u00f6skel kommer elementet att bete sig som om det hade en relativ positionering.<\/p>\n
    L\u00e5t oss st\u00e4lla in den andra underordnade positionen till klibbig med en \u00f6vre tr\u00f6skel:<\/p>\n
    .child_2 {position: sticky;top: 0px;border: 8px solid purple;}<\/pre>\n
    H\u00e4r \u00e4r resultatet:<\/p>\n
    \n<\/figure>\n
    Som du kan se beter sig det andra barnet som de andra barnen n\u00e4r det rullar.  Men n\u00e4r den n\u00e5r tr\u00f6skelv\u00e4rdet (\u00f6versta: 0px) beter den sig som om den vore fixerad och l\u00e4mnar det normala dokumentfl\u00f6det.  Du kan f\u00e5 ett navigeringsf\u00e4lt att f\u00e4sta vid rubriken med klibbig positionering.<\/p>\n
    <\/span>  Slutsats<\/span><\/h2>\n
    CSS-positionsegenskapen \u00e4r en avancerad webbdesignf\u00e4rdighet.  Det kr\u00e4ver lite l\u00e4rande, men allt du beh\u00f6ver g\u00f6ra \u00e4r att leka med olika v\u00e4rderingar, resultat och undantag.  Kom ih\u00e5g att ingenting kan sl\u00e5 \u00f6vning n\u00e4r det g\u00e4ller att skapa en fantastisk webbdesign.  S\u00e5 forts\u00e4tt att \u00f6va s\u00e5 blir du b\u00e4ttre.  Glad kodning!<\/p>\n
        Om f\u00f6rfattaren<\/strong><\/p>\n
                Naincy Mourya (19 artiklar publicerade)
    <\/strong><\/p>\n
    Naincy \u00e4r specialiserat p\u00e5 att bygga mycket responsiva webbplatser och effektiv inneh\u00e5llsstrategi tillsammans med webbkopior.  Hon \u00e4r en frilansande teknikskribent som h\u00e5ller ett skarpt \u00f6ga p\u00e5 trendteknologi.<\/p>\n
                                Mer fr\u00e5n Naincy Mourya<\/p>\n
    <\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
    G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
    Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
    \n
    \n
    Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n