在不访问 html 的情况下重新排序 Div

Question

我正在自定义一个 wordpress 主题，但遇到了一个令人沮丧的阻止程序。

我想将标题 (header.non-sticky-nav) 放置在全屏封面 (.fullscreen-cover) 之后和内容 (.content) 之前。

<header class="non-sticky-nav">
    <div id="navbar"></div>
</header>
<div id="wrapper">
    <div id="content">
        <div class="fullscreen-cover"></div>
        <div class="content"></div>
    </div>
</div>

current-result_vs_desired-result

我尝试使用“top: xpx”值重新定位导航栏，但显然这不起作用，因为 .fullscreen-cover 不是固定高度。

这是我用于该问题的测试页面：http://samburrough.design/test/

主题允许页面特定或全局 css 代码注入，并且随着主题定期更新，我想尝试并坚持使用此功能，而不是钻研主题文件并在每次我想更新时覆盖更改.

任何帮助将不胜感激！

Answer 1

您不能创建一个子主题并以这种方式修改 DOM 吗？ 至少这样每次发布父主题的更新时不会覆盖更改？

这实际上（应该）是首选。

Smashing Magazine; Create and Customise Wordpress Child Theme

Answer 2

很遗憾，如果主题不包含块定位，则需要编辑 DOM。虽然您可能会在栏和英雄上使用一些不稳定的绝对定位，但绝对定位它们可能会给您带来一连串的问题 - 从响应式导航开始。

Answer 3

有一个 javascript 函数/方法可以让节点在 dom 中交换位置。 你可以试试看Node.replaceChild()

以下示例来自文档并创建一个新元素，但您也可以选择现有节点。

// create an empty element node
// without an ID, any attributes, or any content
var sp1 = document.createElement("span");

// give it an id attribute called 'newSpan'
sp1.id = "newSpan";

// create some content for the new element.
var sp1_content = document.createTextNode("new replacement span element.");

// apply that content to the new element
sp1.appendChild(sp1_content);

// build a reference to the existing node to be replaced
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// replace existing node sp2 with the new span element sp1
parentDiv.replaceChild(sp1, sp2);

Answer 4

您可以尝试将order 与 flexbox 一起使用。例如：

.container {
  display: flex;
  flex-wrap: wrap;
}

.one,
.two {
  width: 100%;
}

.one {
  order: 2;
  background: red;
}


.two {
  order: 1;
  background: blue;
}

<div class="container">
  <div class="one">
  1
  </div>
  <div class="two">
  2
  </div>
</div>

可能有点问题，具体取决于您的标记。并且不适用于旧版浏览器。