{"id":2757,"date":"2020-09-16T22:07:55","date_gmt":"2020-09-16T20:07:55","guid":{"rendered":"https:\/\/vielhuber.de\/?p=2757"},"modified":"2020-09-21T00:21:54","modified_gmt":"2020-09-20T22:21:54","slug":"seite-per-css-hinter-overlay-weichzeichnen","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/","title":{"rendered":"Seite per CSS hinter Overlay weichzeichnen"},"content":{"rendered":"\n<p>Setzt man Elemente wie Overlays ein (was in Zeiten von GDPR-Aktionismus die Regel ist) und will den Bereich hinter dem Overlay beispielsweise weichzeichnen, st\u00f6\u00dft man h\u00e4ufig auf das Problem des <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Positioning\/Understanding_z_index\/The_stacking_context\" target=\"_blank\" rel=\"noreferrer noopener\">Stacking Contexts<\/a>. Hat man n\u00e4mlich beispielsweise absolut oder fixiert positionierte Elemente, werden diese pl\u00f6tzlich anders dargestellt als ohne angewendeten Filter. Doch es gibt Abhilfe.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Folgender Code illustriert dieses Beispiel. Die Box im Hintergrund sollte eigentlich am rechten oberen Rand positioniert sein, ist jedoch verschoben:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"html,result\" data-user=\"vielhuber\" data-slug-hash=\"zYqJxQO\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS BLUR STACKING CONTEXT #1\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/vielhuber\/pen\/zYqJxQO\">\n  CSS BLUR STACKING CONTEXT #1<\/a> by David Vielhuber (<a href=\"https:\/\/codepen.io\/vielhuber\">@vielhuber<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>Das W3C sagt hier klar: <em>\"It's not a bug, it's a feature.\"<\/em>. Die <a rel=\"noreferrer noopener\" href=\"https:\/\/drafts.fxtf.org\/filter-effects\/#FilterProperty\" target=\"_blank\">Spezifikation<\/a> erl\u00e4utert den Zusammenhang:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>A value other than&nbsp;none&nbsp;for the&nbsp;filter&nbsp;property results in the creation of a&nbsp;containing block&nbsp;for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current&nbsp;browsing context. The list of functions are applied in the order provided.<\/p><\/blockquote>\n\n\n\n<p>Die <a href=\"https:\/\/github.com\/w3c\/fxtf-drafts\/issues\/11\" target=\"_blank\" rel=\"noreferrer noopener\">Diskussion<\/a> dazu auf GitHub ist ebenfalls lesenswert.<\/p>\n\n\n\n<p>Die folgenden CSS-Eigenschaften erzeugen einen neuen Stacking-Context, sodass absolut oder fixiert positionierte Kind-Elemente sich nicht mehr relativ zum Viewport, sondern zum gefilterten Parent-Element verhalten:<\/p>\n\n\n\n<ul class=\"notranslate wp-block-list\"><li>filter<\/li><li>transform<\/li><li>backdrop-filter<\/li><li>perspective<\/li><li>contain<\/li><li>transform-style<\/li><li>will-change<\/li><\/ul>\n\n\n\n<p>Doch es gibt eine L\u00f6sung f\u00fcr das urspr\u00fcngliche Problem: Die CSS-Eigenschaft <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/backdrop-filter\" target=\"_blank\" rel=\"noreferrer noopener\">backdrop-filter<\/a> (die man eigentlich f\u00fcr das partielle Filtern von Bereichen hinter Elementen kennt), leistet hier das Gew\u00fcnschte. Zwar wird auch hier ein neuer Stacking-Context erzeugt, dieser ist jedoch irrelevant, da sich keine Kind-Elemente im Pseudo-Element befinden:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"dark\" data-default-tab=\"html,result\" data-user=\"vielhuber\" data-slug-hash=\"poyOvmq\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS BLUR STACKING CONTEXT #2\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/vielhuber\/pen\/poyOvmq\">\n  CSS BLUR STACKING CONTEXT #2<\/a> by David Vielhuber (<a href=\"https:\/\/codepen.io\/vielhuber\">@vielhuber<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Setzt man Elemente wie Overlays ein (was in Zeiten von GDPR-Aktionismus die Regel ist) und will den Bereich hinter dem Overlay beispielsweise weichzeichnen, st\u00f6\u00dft man h\u00e4ufig auf das Problem des Stacking Contexts. Hat man n\u00e4mlich beispielsweise absolut oder fixiert positionierte Elemente, werden diese pl\u00f6tzlich anders dargestellt als ohne angewendeten Filter. Doch es gibt Abhilfe.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-2757","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Seite per CSS hinter Overlay weichzeichnen &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Setzt man Elemente wie Overlays ein (was in Zeiten von GDPR-Aktionismus die Regel ist) und will den Bereich hinter dem Overlay beispielsweise\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Seite per CSS hinter Overlay weichzeichnen &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Setzt man Elemente wie Overlays ein (was in Zeiten von GDPR-Aktionismus die Regel ist) und will den Bereich hinter dem Overlay beispielsweise\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-16T20:07:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-20T22:21:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/seite-per-css-hinter-overlay-weichzeichnen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/seite-per-css-hinter-overlay-weichzeichnen\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Seite per CSS hinter Overlay weichzeichnen\",\"datePublished\":\"2020-09-16T20:07:55+00:00\",\"dateModified\":\"2020-09-20T22:21:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/seite-per-css-hinter-overlay-weichzeichnen\\\/\"},\"wordCount\":278,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/seite-per-css-hinter-overlay-weichzeichnen\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/seite-per-css-hinter-overlay-weichzeichnen\\\/\",\"name\":\"Seite per CSS hinter Overlay weichzeichnen &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2020-09-16T20:07:55+00:00\",\"dateModified\":\"2020-09-20T22:21:54+00:00\",\"description\":\"Setzt man Elemente wie Overlays ein (was in Zeiten von GDPR-Aktionismus die Regel ist) und will den Bereich hinter dem Overlay beispielsweise\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/seite-per-css-hinter-overlay-weichzeichnen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/seite-per-css-hinter-overlay-weichzeichnen\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/seite-per-css-hinter-overlay-weichzeichnen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Seite per CSS hinter Overlay weichzeichnen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Seite per CSS hinter Overlay weichzeichnen &#060; Vielhuber David","description":"Setzt man Elemente wie Overlays ein (was in Zeiten von GDPR-Aktionismus die Regel ist) und will den Bereich hinter dem Overlay beispielsweise","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/","og_locale":"de_DE","og_type":"article","og_title":"Seite per CSS hinter Overlay weichzeichnen &#060; Vielhuber David","og_description":"Setzt man Elemente wie Overlays ein (was in Zeiten von GDPR-Aktionismus die Regel ist) und will den Bereich hinter dem Overlay beispielsweise","og_url":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/","og_site_name":"Vielhuber David","article_published_time":"2020-09-16T20:07:55+00:00","article_modified_time":"2020-09-20T22:21:54+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Seite per CSS hinter Overlay weichzeichnen","datePublished":"2020-09-16T20:07:55+00:00","dateModified":"2020-09-20T22:21:54+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/"},"wordCount":278,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/","url":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/","name":"Seite per CSS hinter Overlay weichzeichnen &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2020-09-16T20:07:55+00:00","dateModified":"2020-09-20T22:21:54+00:00","description":"Setzt man Elemente wie Overlays ein (was in Zeiten von GDPR-Aktionismus die Regel ist) und will den Bereich hinter dem Overlay beispielsweise","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/seite-per-css-hinter-overlay-weichzeichnen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Seite per CSS hinter Overlay weichzeichnen"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/posts\/2757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/comments?post=2757"}],"version-history":[{"count":11,"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/posts\/2757\/revisions"}],"predecessor-version":[{"id":2768,"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/posts\/2757\/revisions\/2768"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/media?parent=2757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/categories?post=2757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/la\/wp-json\/wp\/v2\/tags?post=2757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}