[{"data":1,"prerenderedAt":552},["Reactive",2],{"content-query-eEwTpNBNQc":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":547,"_id":548,"_source":549,"_file":550,"_extension":551},"/docs/utilities/css/position","css",false,"","CSS Utility Classes - Position - Inkline","Use position utilities for quickly setting the position of an element.",{"type":11,"children":12,"toc":538},"root",[13,20,27,33,102,153,204,255,306,313,318,369,375,380,431,437,457,482,533],{"type":14,"tag":15,"props":16,"children":19},"element","content-heading",{"subtitle":17,"title":18},"CSS Utility Classes","Position",[],{"type":14,"tag":21,"props":22,"children":24},"h2",{"id":23},"use-position-utilities-for-quickly-setting-the-position-of-an-element",[25],{"type":26,"value":9},"text",{"type":14,"tag":28,"props":29,"children":30},"p",{},[31],{"type":26,"value":32},"The most common positioning classes are available:",{"type":14,"tag":34,"props":35,"children":40},"code",{"className":36,"code":38,"language":39,"meta":7},[37],"language-html","\u003Cdiv class=\"_position:static\">...\u003C/div>\n","html",[41],{"type":14,"tag":42,"props":43,"children":44},"pre",{},[45],{"type":14,"tag":34,"props":46,"children":47},{"__ignoreMap":7},[48],{"type":14,"tag":49,"props":50,"children":53},"span",{"class":51,"line":52},"line",1,[54,60,66,71,77,82,88,93,97],{"type":14,"tag":49,"props":55,"children":57},{"class":56},"ct-553616",[58],{"type":26,"value":59},"\u003C",{"type":14,"tag":49,"props":61,"children":63},{"class":62},"ct-914029",[64],{"type":26,"value":65},"div",{"type":14,"tag":49,"props":67,"children":68},{"class":56},[69],{"type":26,"value":70}," ",{"type":14,"tag":49,"props":72,"children":74},{"class":73},"ct-762058",[75],{"type":26,"value":76},"class",{"type":14,"tag":49,"props":78,"children":79},{"class":56},[80],{"type":26,"value":81},"=",{"type":14,"tag":49,"props":83,"children":85},{"class":84},"ct-952708",[86],{"type":26,"value":87},"\"_position:static\"",{"type":14,"tag":49,"props":89,"children":90},{"class":56},[91],{"type":26,"value":92},">...\u003C/",{"type":14,"tag":49,"props":94,"children":95},{"class":62},[96],{"type":26,"value":65},{"type":14,"tag":49,"props":98,"children":99},{"class":56},[100],{"type":26,"value":101},">",{"type":14,"tag":34,"props":103,"children":106},{"className":104,"code":105,"language":39,"meta":7},[37],"\u003Cdiv class=\"_position:relative\">...\u003C/div>\n",[107],{"type":14,"tag":42,"props":108,"children":109},{},[110],{"type":14,"tag":34,"props":111,"children":112},{"__ignoreMap":7},[113],{"type":14,"tag":49,"props":114,"children":115},{"class":51,"line":52},[116,120,124,128,132,136,141,145,149],{"type":14,"tag":49,"props":117,"children":118},{"class":56},[119],{"type":26,"value":59},{"type":14,"tag":49,"props":121,"children":122},{"class":62},[123],{"type":26,"value":65},{"type":14,"tag":49,"props":125,"children":126},{"class":56},[127],{"type":26,"value":70},{"type":14,"tag":49,"props":129,"children":130},{"class":73},[131],{"type":26,"value":76},{"type":14,"tag":49,"props":133,"children":134},{"class":56},[135],{"type":26,"value":81},{"type":14,"tag":49,"props":137,"children":138},{"class":84},[139],{"type":26,"value":140},"\"_position:relative\"",{"type":14,"tag":49,"props":142,"children":143},{"class":56},[144],{"type":26,"value":92},{"type":14,"tag":49,"props":146,"children":147},{"class":62},[148],{"type":26,"value":65},{"type":14,"tag":49,"props":150,"children":151},{"class":56},[152],{"type":26,"value":101},{"type":14,"tag":34,"props":154,"children":157},{"className":155,"code":156,"language":39,"meta":7},[37],"\u003Cdiv class=\"_position:absolute\">...\u003C/div>\n",[158],{"type":14,"tag":42,"props":159,"children":160},{},[161],{"type":14,"tag":34,"props":162,"children":163},{"__ignoreMap":7},[164],{"type":14,"tag":49,"props":165,"children":166},{"class":51,"line":52},[167,171,175,179,183,187,192,196,200],{"type":14,"tag":49,"props":168,"children":169},{"class":56},[170],{"type":26,"value":59},{"type":14,"tag":49,"props":172,"children":173},{"class":62},[174],{"type":26,"value":65},{"type":14,"tag":49,"props":176,"children":177},{"class":56},[178],{"type":26,"value":70},{"type":14,"tag":49,"props":180,"children":181},{"class":73},[182],{"type":26,"value":76},{"type":14,"tag":49,"props":184,"children":185},{"class":56},[186],{"type":26,"value":81},{"type":14,"tag":49,"props":188,"children":189},{"class":84},[190],{"type":26,"value":191},"\"_position:absolute\"",{"type":14,"tag":49,"props":193,"children":194},{"class":56},[195],{"type":26,"value":92},{"type":14,"tag":49,"props":197,"children":198},{"class":62},[199],{"type":26,"value":65},{"type":14,"tag":49,"props":201,"children":202},{"class":56},[203],{"type":26,"value":101},{"type":14,"tag":34,"props":205,"children":208},{"className":206,"code":207,"language":39,"meta":7},[37],"\u003Cdiv class=\"_position:fixed\">...\u003C/div>\n",[209],{"type":14,"tag":42,"props":210,"children":211},{},[212],{"type":14,"tag":34,"props":213,"children":214},{"__ignoreMap":7},[215],{"type":14,"tag":49,"props":216,"children":217},{"class":51,"line":52},[218,222,226,230,234,238,243,247,251],{"type":14,"tag":49,"props":219,"children":220},{"class":56},[221],{"type":26,"value":59},{"type":14,"tag":49,"props":223,"children":224},{"class":62},[225],{"type":26,"value":65},{"type":14,"tag":49,"props":227,"children":228},{"class":56},[229],{"type":26,"value":70},{"type":14,"tag":49,"props":231,"children":232},{"class":73},[233],{"type":26,"value":76},{"type":14,"tag":49,"props":235,"children":236},{"class":56},[237],{"type":26,"value":81},{"type":14,"tag":49,"props":239,"children":240},{"class":84},[241],{"type":26,"value":242},"\"_position:fixed\"",{"type":14,"tag":49,"props":244,"children":245},{"class":56},[246],{"type":26,"value":92},{"type":14,"tag":49,"props":248,"children":249},{"class":62},[250],{"type":26,"value":65},{"type":14,"tag":49,"props":252,"children":253},{"class":56},[254],{"type":26,"value":101},{"type":14,"tag":34,"props":256,"children":259},{"className":257,"code":258,"language":39,"meta":7},[37],"\u003Cdiv class=\"_position:sticky\">...\u003C/div>\n",[260],{"type":14,"tag":42,"props":261,"children":262},{},[263],{"type":14,"tag":34,"props":264,"children":265},{"__ignoreMap":7},[266],{"type":14,"tag":49,"props":267,"children":268},{"class":51,"line":52},[269,273,277,281,285,289,294,298,302],{"type":14,"tag":49,"props":270,"children":271},{"class":56},[272],{"type":26,"value":59},{"type":14,"tag":49,"props":274,"children":275},{"class":62},[276],{"type":26,"value":65},{"type":14,"tag":49,"props":278,"children":279},{"class":56},[280],{"type":26,"value":70},{"type":14,"tag":49,"props":282,"children":283},{"class":73},[284],{"type":26,"value":76},{"type":14,"tag":49,"props":286,"children":287},{"class":56},[288],{"type":26,"value":81},{"type":14,"tag":49,"props":290,"children":291},{"class":84},[292],{"type":26,"value":293},"\"_position:sticky\"",{"type":14,"tag":49,"props":295,"children":296},{"class":56},[297],{"type":26,"value":92},{"type":14,"tag":49,"props":299,"children":300},{"class":62},[301],{"type":26,"value":65},{"type":14,"tag":49,"props":303,"children":304},{"class":56},[305],{"type":26,"value":101},{"type":14,"tag":307,"props":308,"children":310},"h3",{"id":309},"fixed-top",[311],{"type":26,"value":312},"Fixed Top",{"type":14,"tag":28,"props":314,"children":315},{},[316],{"type":26,"value":317},"You can position an element at the top of the viewport. This is usually used for positioning Navbars at the top of the page. Make sure you understand the implication of adding fixed position in your project and add additional CSS as needed.",{"type":14,"tag":34,"props":319,"children":322},{"className":320,"code":321,"language":39,"meta":7},[37],"\u003Cdiv class=\"_position:fixed-top\">...\u003C/div>\n",[323],{"type":14,"tag":42,"props":324,"children":325},{},[326],{"type":14,"tag":34,"props":327,"children":328},{"__ignoreMap":7},[329],{"type":14,"tag":49,"props":330,"children":331},{"class":51,"line":52},[332,336,340,344,348,352,357,361,365],{"type":14,"tag":49,"props":333,"children":334},{"class":56},[335],{"type":26,"value":59},{"type":14,"tag":49,"props":337,"children":338},{"class":62},[339],{"type":26,"value":65},{"type":14,"tag":49,"props":341,"children":342},{"class":56},[343],{"type":26,"value":70},{"type":14,"tag":49,"props":345,"children":346},{"class":73},[347],{"type":26,"value":76},{"type":14,"tag":49,"props":349,"children":350},{"class":56},[351],{"type":26,"value":81},{"type":14,"tag":49,"props":353,"children":354},{"class":84},[355],{"type":26,"value":356},"\"_position:fixed-top\"",{"type":14,"tag":49,"props":358,"children":359},{"class":56},[360],{"type":26,"value":92},{"type":14,"tag":49,"props":362,"children":363},{"class":62},[364],{"type":26,"value":65},{"type":14,"tag":49,"props":366,"children":367},{"class":56},[368],{"type":26,"value":101},{"type":14,"tag":307,"props":370,"children":372},{"id":371},"fixed-bottom",[373],{"type":26,"value":374},"Fixed Bottom",{"type":14,"tag":28,"props":376,"children":377},{},[378],{"type":26,"value":379},"You can position an element at the bottom of the viewport. This is usually used for positioning Navbars at the bottom of the page.",{"type":14,"tag":34,"props":381,"children":384},{"className":382,"code":383,"language":39,"meta":7},[37],"\u003Cdiv class=\"_position:fixed-bottom\">...\u003C/div>\n",[385],{"type":14,"tag":42,"props":386,"children":387},{},[388],{"type":14,"tag":34,"props":389,"children":390},{"__ignoreMap":7},[391],{"type":14,"tag":49,"props":392,"children":393},{"class":51,"line":52},[394,398,402,406,410,414,419,423,427],{"type":14,"tag":49,"props":395,"children":396},{"class":56},[397],{"type":26,"value":59},{"type":14,"tag":49,"props":399,"children":400},{"class":62},[401],{"type":26,"value":65},{"type":14,"tag":49,"props":403,"children":404},{"class":56},[405],{"type":26,"value":70},{"type":14,"tag":49,"props":407,"children":408},{"class":73},[409],{"type":26,"value":76},{"type":14,"tag":49,"props":411,"children":412},{"class":56},[413],{"type":26,"value":81},{"type":14,"tag":49,"props":415,"children":416},{"class":84},[417],{"type":26,"value":418},"\"_position:fixed-bottom\"",{"type":14,"tag":49,"props":420,"children":421},{"class":56},[422],{"type":26,"value":92},{"type":14,"tag":49,"props":424,"children":425},{"class":62},[426],{"type":26,"value":65},{"type":14,"tag":49,"props":428,"children":429},{"class":56},[430],{"type":26,"value":101},{"type":14,"tag":307,"props":432,"children":434},{"id":433},"sticky-top",[435],{"type":26,"value":436},"Sticky Top",{"type":14,"tag":28,"props":438,"children":439},{},[440,442,448,450,455],{"type":26,"value":441},"Position an element at the top of the viewport, but only after you scroll past it. The ",{"type":14,"tag":443,"props":444,"children":445},"code-inline",{},[446],{"type":26,"value":447},"_sticky-top",{"type":26,"value":449}," utility uses ",{"type":14,"tag":443,"props":451,"children":452},{},[453],{"type":26,"value":454},"position: sticky",{"type":26,"value":456},", which isn’t fully supported in all browsers.",{"type":14,"tag":28,"props":458,"children":459},{},[460,462,466,468,473,475,480],{"type":26,"value":461},"IE11 and IE10 will render ",{"type":14,"tag":443,"props":463,"children":464},{},[465],{"type":26,"value":454},{"type":26,"value":467}," as ",{"type":14,"tag":443,"props":469,"children":470},{},[471],{"type":26,"value":472},"position: relative",{"type":26,"value":474},". We wrap the styles in a ",{"type":14,"tag":443,"props":476,"children":477},{},[478],{"type":26,"value":479},"@supports",{"type":26,"value":481}," query, limiting the stickiness to only browsers that can render it properly.",{"type":14,"tag":34,"props":483,"children":486},{"className":484,"code":485,"language":39,"meta":7},[37],"\u003Cdiv class=\"_position:sticky-top\">...\u003C/div>\n",[487],{"type":14,"tag":42,"props":488,"children":489},{},[490],{"type":14,"tag":34,"props":491,"children":492},{"__ignoreMap":7},[493],{"type":14,"tag":49,"props":494,"children":495},{"class":51,"line":52},[496,500,504,508,512,516,521,525,529],{"type":14,"tag":49,"props":497,"children":498},{"class":56},[499],{"type":26,"value":59},{"type":14,"tag":49,"props":501,"children":502},{"class":62},[503],{"type":26,"value":65},{"type":14,"tag":49,"props":505,"children":506},{"class":56},[507],{"type":26,"value":70},{"type":14,"tag":49,"props":509,"children":510},{"class":73},[511],{"type":26,"value":76},{"type":14,"tag":49,"props":513,"children":514},{"class":56},[515],{"type":26,"value":81},{"type":14,"tag":49,"props":517,"children":518},{"class":84},[519],{"type":26,"value":520},"\"_position:sticky-top\"",{"type":14,"tag":49,"props":522,"children":523},{"class":56},[524],{"type":26,"value":92},{"type":14,"tag":49,"props":526,"children":527},{"class":62},[528],{"type":26,"value":65},{"type":14,"tag":49,"props":530,"children":531},{"class":56},[532],{"type":26,"value":101},{"type":14,"tag":534,"children":535},"style",[536],{"type":26,"value":537},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}",{"title":7,"searchDepth":539,"depth":539,"links":540},2,[541],{"id":23,"depth":539,"text":9,"children":542},[543,545,546],{"id":309,"depth":544,"text":312},3,{"id":371,"depth":544,"text":374},{"id":433,"depth":544,"text":436},"markdown","content:docs:utilities:css:position.md","content","docs/utilities/css/position.md","md",1794582261664]