[{"data":1,"prerenderedAt":178},["ShallowReactive",2],{"til-absolute-positioned-decorations":3},{"id":4,"title":5,"body":6,"date":163,"description":164,"extension":165,"language":166,"meta":167,"navigation":168,"path":169,"seo":170,"stem":171,"tags":172,"__hash__":177},"til/til/absolute-positioned-decorations.md","Dekorative Hintergründe ohne Layout-Chaos",{"type":7,"value":8,"toc":161},"minimark",[9,26,73,79,142,157],[10,11,12,16,17,21,22,25],"p",{},[13,14,15],"strong",{},"Problem:"," Du willst einen Kreis hinter Text — aber ",[18,19,20],"code",{},"padding"," und ",[18,23,24],{},"background"," zerstören das Spacing.",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Kaputt: Buchstaben werden auseinandergerissen -->\n\u003Cspan class=\"bg-error/20 rounded-full px-2\">ai\u003C/span>\n","html","",[18,34,35,44],{"__ignoreMap":32},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sJ8bj","\u003C!-- Kaputt: Buchstaben werden auseinandergerissen -->\n",[36,45,47,51,54,58,61,65,68,70],{"class":38,"line":46},2,[36,48,50],{"class":49},"sVt8B","\u003C",[36,52,36],{"class":53},"s9eBZ",[36,55,57],{"class":56},"sScJk"," class",[36,59,60],{"class":49},"=",[36,62,64],{"class":63},"sZZnC","\"bg-error/20 rounded-full px-2\"",[36,66,67],{"class":49},">ai\u003C/",[36,69,36],{"class":53},[36,71,72],{"class":49},">\n",[10,74,75,78],{},[13,76,77],{},"Lösung:"," Absolute Positionierung mit negativem z-index:",[27,80,82],{"className":29,"code":81,"language":31,"meta":32,"style":32},"\u003Cspan class=\"relative\">\n  \u003Cspan class=\"absolute -inset-x-2 -inset-y-0.5 \n               bg-error/20 rounded-full -z-10\">\u003C/span>\n  ai\n\u003C/span>\n",[18,83,84,99,113,126,132],{"__ignoreMap":32},[36,85,86,88,90,92,94,97],{"class":38,"line":39},[36,87,50],{"class":49},[36,89,36],{"class":53},[36,91,57],{"class":56},[36,93,60],{"class":49},[36,95,96],{"class":63},"\"relative\"",[36,98,72],{"class":49},[36,100,101,104,106,108,110],{"class":38,"line":46},[36,102,103],{"class":49},"  \u003C",[36,105,36],{"class":53},[36,107,57],{"class":56},[36,109,60],{"class":49},[36,111,112],{"class":63},"\"absolute -inset-x-2 -inset-y-0.5 \n",[36,114,116,119,122,124],{"class":38,"line":115},3,[36,117,118],{"class":63},"               bg-error/20 rounded-full -z-10\"",[36,120,121],{"class":49},">\u003C/",[36,123,36],{"class":53},[36,125,72],{"class":49},[36,127,129],{"class":38,"line":128},4,[36,130,131],{"class":49},"  ai\n",[36,133,135,138,140],{"class":38,"line":134},5,[36,136,137],{"class":49},"\u003C/",[36,139,36],{"class":53},[36,141,72],{"class":49},[10,143,144,145,148,149,152,153,156],{},"Der Hintergrund ist jetzt ",[13,146,147],{},"aus dem Textfluss genommen",". ",[18,150,151],{},"-inset-x-2"," erweitert ihn über die Textbreite hinaus. ",[18,154,155],{},"-z-10"," schiebt ihn hinter den Text. Clean.",[158,159,160],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":32,"searchDepth":46,"depth":46,"links":162},[],"2025-01-28","Problem: Du willst einen Kreis hinter Text — aber padding und background zerstören das Spacing.","md","de",{},true,"/til/absolute-positioned-decorations",{"title":5,"description":164},"til/absolute-positioned-decorations",[173,174,175,176],"css","tailwind","layout","design","QD049rU-iTGppge_DXPHhb-5wbCKO40ciP07pYP82cI",1789790494202]