Article Layout- Empty margin sidebar fix z-order

Since the margin element has no children, we can safely push it to the bottom (and in fact, we need to in order to ensure that the links and other elements in the margin are clickable).

Fixes #8311

Author: dragonstyle

news/changelog-1.5.md

@@ -3,6 +3,7 @@ All changes included in 1.5:
 ## HTML Format
 
 - ([#8118](https://github.com/quarto-dev/quarto-cli/issues/8118)): Add support for `body-classes` to add classes to the document body.
+- ([#8311](https://github.com/quarto-dev/quarto-cli/issues/8311)): Correct z-order for margins with no contents
 
 ## Website
 

src/format/html/format-html-bootstrap.ts

@@ -1058,8 +1058,11 @@ function bootstrapHtmlFinalizer(format: Format, flags: PandocFlags) {
     // then lower the z-order so everything else can get on top
     // of the sidebar
     const isFullLayout = format.metadata[kPageLayout] === "full";
-    if (!hasMarginContent && isFullLayout && !hasRightContent) {
-      const marginSidebarEl = doc.getElementById("quarto-margin-sidebar");
+    const marginSidebarEl = doc.getElementById("quarto-margin-sidebar");
+    if (
+      (!hasMarginContent && isFullLayout && !hasRightContent) ||
+      marginSidebarEl?.childElementCount === 0
+    ) {
       marginSidebarEl?.classList.add("zindex-bottom");
     }
     return Promise.resolve();