视觉上放置一个元素，尽管在DOM中它首先使用Grid或Flexbox出现了？

问题描述

我是一个可访问性专家，我的CSS变得非常生锈，但是我需要快速提供一个在视觉上将元素放置在另一个元素之后的示例，尽管在DOM中是相反的。

在下面的代码中，<time>元素应在标题之前中直观地显示，但出于可访问性的原因，在DOM中应放置在其之后。

<article>
  <h2>Wahlresultate bekannt gegeben</h2>
  <time datetime="2020-08-18">Dienstag,18.8.2020</time>

  <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p>
</article>

在早期，我们需要使用简单的绝对定位来实现类似的目标。我今天该怎么用？ FlexBox？格？以及如何实现？

非常感谢。

解决方法

您可以使用Flex Box，特别是order属性来实现这一点。

尽管在每种情况下都请小心使用，但是视觉上与DOM顺序不同的顺序通常是可访问性（尽管在这种情况下看起来不错）。谨慎使用！

article {
  display: flex;
  flex-direction: column;
}

h2 {
  order: 2;
  margin-top: 0.5em;
}
time {
  order: 1;
}
p{
   order: 3;
}

<article>
  <h2>Wahlresultate bekannt gegeben</h2>
  <time datetime="2020-08-18">Dienstag,18.8.2020</time>

  <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p>
</article>

为了更容易控制，我将在要交换的元素周围添加一个<div>并使其成为display: flex，这样您就不必定义其中所有内容的顺序article。

如果您无法更改标记，我会同时提供这两个版本。

.container {
      display: flex;
      flex-direction: column;
    }

    h2 {
      order: 2;
      margin-top: 0.5em;
    }
    time {
      order: 1;
    }

<article>
      <div class="container">
          <h2>Wahlresultate bekannt gegeben</h2>
          <time datetime="2020-08-18">Dienstag,18.8.2020</time>
      </div>
      <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p>
</article>

最大兼容性

因为它被标记为accessibility，所以在使用flexbox时请注意。 Flexbox does not work in IE 8,9 etc.。

这是一个问题，因为a lot of screen reader users still use IE8,IE9,IE10 etc。

因此，您应该使用flexbox polyfill或改为使用absolute positioning as shown in this fiddle.

accessibility css-grid flexbox