fix isolation, float, and abs position issues

Author: jparkerweb

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to the Pixel Banner plugin will be documented in this file.
 
+## [2.8.1] - 2024-11-07
+
+### Fixed
+- Banner image overlapping with note content
+- Banner image impacting absolute-positioned and floated elements
+
 ## [2.8.0] - 2024-11-04
 
 ### Added

UPDATE.md

@@ -1,5 +1,10 @@
 ## 🎉 What's New
 
+### v2.8.1
+#### Fixed
+- Banner image overlapping with note content
+- Banner image impacting absolute-positioned and floated elements
+
 ### v2.8.0
 #### Added
 - Unsplash API support

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "pexels-banner",
     "name": "Pixel Banner",
-    "version": "2.8.0",
+    "version": "2.8.1",
     "minAppVersion": "1.6.0",
     "description": "Apply an image from various sources as a banner to your notes.",
     "author": "Justin Parker",

styles.css

@@ -1,11 +1,10 @@
+/* ------------------------------------------------------------------ */
+/* -- configure default: move banner image to top, fade/size, etc. -- */
+/* ------------------------------------------------------------------ */
 @keyframes pixel-banner-image--fade-in {
     from { opacity: 0; }
     to { opacity: 1; }
 }
-
-/* ------------------------------------------------------------------ */
-/* -- configure default: move banner image to top, fade/size, etc. -- */
-/* ------------------------------------------------------------------ */
 .pixel-banner-image {
 	position: absolute;
 	top: 0;
@@ -23,13 +22,16 @@
 	will-change: opacity;
 	transform: translateZ(0);
 	background-repeat: no-repeat;
-    z-index: 0;
+    z-index: -1;
 }
+
 /* fix for banner image overlapping with note content */
-.pixel-banner-image ~ div {
-    z-index: 1;
+/* isolate the banner image from the note content */
+.view-content.pixel-banner {
     position: relative;
+    isolation: isolate;
 }
+
 .cm-sizer .metadata-container,
 .markdown-preview-sizer .metadata-container {
     z-index: 1;