[{"data":1,"prerenderedAt":518},["Reactive",2],{"content-query-4voLc1ja9T":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":513,"_id":514,"_source":515,"_file":516,"_extension":517},"/docs/utilities/css/overlay","css",false,"","CSS Utility Classes - Overlay - Inkline","Make an element overlay its container by adding overlay utilities.",{"type":11,"children":12,"toc":508},"root",[13,20,27,48,272,279,302,504],{"type":14,"tag":15,"props":16,"children":19},"element","content-heading",{"subtitle":17,"title":18},"CSS Utility Classes","Overlay",[],{"type":14,"tag":21,"props":22,"children":24},"h2",{"id":23},"make-an-element-overlay-its-container-by-adding-overlay-utilities",[25],{"type":26,"value":9},"text",{"type":14,"tag":28,"props":29,"children":30},"p",{},[31,33,39,41,46],{"type":26,"value":32},"Add the ",{"type":14,"tag":34,"props":35,"children":36},"code-inline",{},[37],{"type":26,"value":38},"_overlay",{"type":26,"value":40}," utility class to an element to make it cover the entire containing block. The containing block refers to a parent element with ",{"type":14,"tag":34,"props":42,"children":43},{},[44],{"type":26,"value":45},"position: relative;",{"type":26,"value":47},".",{"type":14,"tag":49,"props":50,"children":51},"content-tabs",{},[52,61],{"type":14,"tag":53,"props":54,"children":55},"template",{"v-slot:preview":7},[56],{"type":14,"tag":57,"props":58,"children":60},"content-preview",{"src":59},"/stories/utilities/overlay/basic",[],{"type":14,"tag":53,"props":62,"children":63},{"v-slot:vue":7},[64],{"type":14,"tag":65,"props":66,"children":71},"code",{"className":67,"code":69,"language":70,"meta":7},[68],"language-vue","\u003Ctemplate>\n    \u003Cdiv class=\"_position:relative!\">\n        \u003Cp>This text is covered by an element with an overlay helper class.\u003C/p>\n\n        \u003Cdiv class=\"_overlay!\" style=\"background: rgba(0, 0, 0, 0.1)\" />\n    \u003C/div>\n\u003C/template>\n\n","vue",[72],{"type":14,"tag":73,"props":74,"children":75},"pre",{},[76],{"type":14,"tag":65,"props":77,"children":78},{"__ignoreMap":7},[79,101,141,167,176,237,254],{"type":14,"tag":80,"props":81,"children":84},"span",{"class":82,"line":83},"line",1,[85,91,96],{"type":14,"tag":80,"props":86,"children":88},{"class":87},"ct-553616",[89],{"type":26,"value":90},"\u003C",{"type":14,"tag":80,"props":92,"children":94},{"class":93},"ct-914029",[95],{"type":26,"value":53},{"type":14,"tag":80,"props":97,"children":98},{"class":87},[99],{"type":26,"value":100},">\n",{"type":14,"tag":80,"props":102,"children":104},{"class":82,"line":103},2,[105,110,115,120,126,131,137],{"type":14,"tag":80,"props":106,"children":107},{"class":87},[108],{"type":26,"value":109},"    \u003C",{"type":14,"tag":80,"props":111,"children":112},{"class":93},[113],{"type":26,"value":114},"div",{"type":14,"tag":80,"props":116,"children":117},{"class":87},[118],{"type":26,"value":119}," ",{"type":14,"tag":80,"props":121,"children":123},{"class":122},"ct-762058",[124],{"type":26,"value":125},"class",{"type":14,"tag":80,"props":127,"children":128},{"class":87},[129],{"type":26,"value":130},"=",{"type":14,"tag":80,"props":132,"children":134},{"class":133},"ct-952708",[135],{"type":26,"value":136},"\"_position:relative!\"",{"type":14,"tag":80,"props":138,"children":139},{"class":87},[140],{"type":26,"value":100},{"type":14,"tag":80,"props":142,"children":144},{"class":82,"line":143},3,[145,150,154,159,163],{"type":14,"tag":80,"props":146,"children":147},{"class":87},[148],{"type":26,"value":149},"        \u003C",{"type":14,"tag":80,"props":151,"children":152},{"class":93},[153],{"type":26,"value":28},{"type":14,"tag":80,"props":155,"children":156},{"class":87},[157],{"type":26,"value":158},">This text is covered by an element with an overlay helper class.\u003C/",{"type":14,"tag":80,"props":160,"children":161},{"class":93},[162],{"type":26,"value":28},{"type":14,"tag":80,"props":164,"children":165},{"class":87},[166],{"type":26,"value":100},{"type":14,"tag":80,"props":168,"children":170},{"class":82,"line":169},4,[171],{"type":14,"tag":80,"props":172,"children":173},{},[174],{"type":26,"value":175},"\n",{"type":14,"tag":80,"props":177,"children":179},{"class":82,"line":178},5,[180,184,188,192,196,200,205,209,214,218,223,227,233],{"type":14,"tag":80,"props":181,"children":182},{"class":87},[183],{"type":26,"value":149},{"type":14,"tag":80,"props":185,"children":186},{"class":93},[187],{"type":26,"value":114},{"type":14,"tag":80,"props":189,"children":190},{"class":87},[191],{"type":26,"value":119},{"type":14,"tag":80,"props":193,"children":194},{"class":122},[195],{"type":26,"value":125},{"type":14,"tag":80,"props":197,"children":198},{"class":87},[199],{"type":26,"value":130},{"type":14,"tag":80,"props":201,"children":202},{"class":133},[203],{"type":26,"value":204},"\"_overlay!\"",{"type":14,"tag":80,"props":206,"children":207},{"class":87},[208],{"type":26,"value":119},{"type":14,"tag":80,"props":210,"children":211},{"class":122},[212],{"type":26,"value":213},"style",{"type":14,"tag":80,"props":215,"children":216},{"class":87},[217],{"type":26,"value":130},{"type":14,"tag":80,"props":219,"children":220},{"class":133},[221],{"type":26,"value":222},"\"background: rgba(0, 0, 0, 0.1)\"",{"type":14,"tag":80,"props":224,"children":225},{"class":87},[226],{"type":26,"value":119},{"type":14,"tag":80,"props":228,"children":230},{"class":229},"ct-028869",[231],{"type":26,"value":232},"/",{"type":14,"tag":80,"props":234,"children":235},{"class":87},[236],{"type":26,"value":100},{"type":14,"tag":80,"props":238,"children":240},{"class":82,"line":239},6,[241,246,250],{"type":14,"tag":80,"props":242,"children":243},{"class":87},[244],{"type":26,"value":245},"    \u003C/",{"type":14,"tag":80,"props":247,"children":248},{"class":93},[249],{"type":26,"value":114},{"type":14,"tag":80,"props":251,"children":252},{"class":87},[253],{"type":26,"value":100},{"type":14,"tag":80,"props":255,"children":257},{"class":82,"line":256},7,[258,263,267],{"type":14,"tag":80,"props":259,"children":260},{"class":87},[261],{"type":26,"value":262},"\u003C/",{"type":14,"tag":80,"props":264,"children":265},{"class":93},[266],{"type":26,"value":53},{"type":14,"tag":80,"props":268,"children":269},{"class":87},[270],{"type":26,"value":271},">",{"type":14,"tag":273,"props":274,"children":276},"h3",{"id":275},"overlay-link",[277],{"type":26,"value":278},"Overlay Link",{"type":14,"tag":28,"props":280,"children":281},{},[282,283,288,290,295,297,301],{"type":26,"value":32},{"type":14,"tag":34,"props":284,"children":285},{},[286],{"type":26,"value":287},"_overlay-link",{"type":26,"value":289}," utility class to a link to make the entire containing block clickable using a ",{"type":14,"tag":34,"props":291,"children":292},{},[293],{"type":26,"value":294},"::after",{"type":26,"value":296}," pseudo-element. In most cases, the containing block refers to the parent element with ",{"type":14,"tag":34,"props":298,"children":299},{},[300],{"type":26,"value":45},{"type":26,"value":47},{"type":14,"tag":49,"props":303,"children":304},{},[305,312],{"type":14,"tag":53,"props":306,"children":307},{"v-slot:preview":7},[308],{"type":14,"tag":57,"props":309,"children":311},{"src":310},"/stories/utilities/overlay/link",[],{"type":14,"tag":53,"props":313,"children":314},{"v-slot:vue":7},[315],{"type":14,"tag":65,"props":316,"children":319},{"className":317,"code":318,"language":70,"meta":7},[68],"\u003Ctemplate>\n    \u003CICard>\n        \u003Cp>\n            Some quick example text to build on the card title and make up the bulk of the card's\n            content.\n        \u003C/p>\n\n        \u003Ca class=\"_overlay-link!\" href=\"https://inkline.io\">Example Link\u003C/a>\n    \u003C/ICard>\n\u003C/template>\n\n",[320],{"type":14,"tag":73,"props":321,"children":322},{},[323],{"type":14,"tag":65,"props":324,"children":325},{"__ignoreMap":7},[326,341,357,372,380,388,404,411,472,488],{"type":14,"tag":80,"props":327,"children":328},{"class":82,"line":83},[329,333,337],{"type":14,"tag":80,"props":330,"children":331},{"class":87},[332],{"type":26,"value":90},{"type":14,"tag":80,"props":334,"children":335},{"class":93},[336],{"type":26,"value":53},{"type":14,"tag":80,"props":338,"children":339},{"class":87},[340],{"type":26,"value":100},{"type":14,"tag":80,"props":342,"children":343},{"class":82,"line":103},[344,348,353],{"type":14,"tag":80,"props":345,"children":346},{"class":87},[347],{"type":26,"value":109},{"type":14,"tag":80,"props":349,"children":350},{"class":229},[351],{"type":26,"value":352},"ICard",{"type":14,"tag":80,"props":354,"children":355},{"class":87},[356],{"type":26,"value":100},{"type":14,"tag":80,"props":358,"children":359},{"class":82,"line":143},[360,364,368],{"type":14,"tag":80,"props":361,"children":362},{"class":87},[363],{"type":26,"value":149},{"type":14,"tag":80,"props":365,"children":366},{"class":93},[367],{"type":26,"value":28},{"type":14,"tag":80,"props":369,"children":370},{"class":87},[371],{"type":26,"value":100},{"type":14,"tag":80,"props":373,"children":374},{"class":82,"line":169},[375],{"type":14,"tag":80,"props":376,"children":377},{"class":87},[378],{"type":26,"value":379},"            Some quick example text to build on the card title and make up the bulk of the card's\n",{"type":14,"tag":80,"props":381,"children":382},{"class":82,"line":178},[383],{"type":14,"tag":80,"props":384,"children":385},{"class":87},[386],{"type":26,"value":387},"            content.\n",{"type":14,"tag":80,"props":389,"children":390},{"class":82,"line":239},[391,396,400],{"type":14,"tag":80,"props":392,"children":393},{"class":87},[394],{"type":26,"value":395},"        \u003C/",{"type":14,"tag":80,"props":397,"children":398},{"class":93},[399],{"type":26,"value":28},{"type":14,"tag":80,"props":401,"children":402},{"class":87},[403],{"type":26,"value":100},{"type":14,"tag":80,"props":405,"children":406},{"class":82,"line":256},[407],{"type":14,"tag":80,"props":408,"children":409},{},[410],{"type":26,"value":175},{"type":14,"tag":80,"props":412,"children":414},{"class":82,"line":413},8,[415,419,424,428,432,436,441,445,450,454,459,464,468],{"type":14,"tag":80,"props":416,"children":417},{"class":87},[418],{"type":26,"value":149},{"type":14,"tag":80,"props":420,"children":421},{"class":93},[422],{"type":26,"value":423},"a",{"type":14,"tag":80,"props":425,"children":426},{"class":87},[427],{"type":26,"value":119},{"type":14,"tag":80,"props":429,"children":430},{"class":122},[431],{"type":26,"value":125},{"type":14,"tag":80,"props":433,"children":434},{"class":87},[435],{"type":26,"value":130},{"type":14,"tag":80,"props":437,"children":438},{"class":133},[439],{"type":26,"value":440},"\"_overlay-link!\"",{"type":14,"tag":80,"props":442,"children":443},{"class":87},[444],{"type":26,"value":119},{"type":14,"tag":80,"props":446,"children":447},{"class":122},[448],{"type":26,"value":449},"href",{"type":14,"tag":80,"props":451,"children":452},{"class":87},[453],{"type":26,"value":130},{"type":14,"tag":80,"props":455,"children":456},{"class":133},[457],{"type":26,"value":458},"\"https://inkline.io\"",{"type":14,"tag":80,"props":460,"children":461},{"class":87},[462],{"type":26,"value":463},">Example Link\u003C/",{"type":14,"tag":80,"props":465,"children":466},{"class":93},[467],{"type":26,"value":423},{"type":14,"tag":80,"props":469,"children":470},{"class":87},[471],{"type":26,"value":100},{"type":14,"tag":80,"props":473,"children":475},{"class":82,"line":474},9,[476,480,484],{"type":14,"tag":80,"props":477,"children":478},{"class":87},[479],{"type":26,"value":245},{"type":14,"tag":80,"props":481,"children":482},{"class":229},[483],{"type":26,"value":352},{"type":14,"tag":80,"props":485,"children":486},{"class":87},[487],{"type":26,"value":100},{"type":14,"tag":80,"props":489,"children":491},{"class":82,"line":490},10,[492,496,500],{"type":14,"tag":80,"props":493,"children":494},{"class":87},[495],{"type":26,"value":262},{"type":14,"tag":80,"props":497,"children":498},{"class":93},[499],{"type":26,"value":53},{"type":14,"tag":80,"props":501,"children":502},{"class":87},[503],{"type":26,"value":271},{"type":14,"tag":213,"children":505},[506],{"type":26,"value":507},".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;}\n.ct-028869{color:#B31D28;font-style:italic;}\n.dark-theme .ct-028869{color:#FDAEB7;font-style:italic;}",{"title":7,"searchDepth":103,"depth":103,"links":509},[510],{"id":23,"depth":103,"text":9,"children":511},[512],{"id":275,"depth":143,"text":278},"markdown","content:docs:utilities:css:overlay.md","content","docs/utilities/css/overlay.md","md",1794582261641]