如何在不使用 z-index 的情况下使用 css 网格反向堆叠元素？ [复制]答案

【问题标题】：How to stack elements in reverse with css grid without using z-index? [duplicate]如何在不使用 z-index 的情况下使用 css 网格反向堆叠元素？ [复制]
【发布时间】：2019-09-03 04:22:29
【问题描述】：

我使用 css-grid 使用HTML5 + CSS3 创建了以下同心圆结构。

我想改变堆叠的顺序来颠倒。

默认情况下，每个元素从左到右堆叠，右元素在左上。

我尝试了不同的方法来颠倒顺序，但没有任何效果。

有什么建议吗？

.group {
  display: grid;
  grid-template-columns: repeat(7, 18%);
  width: 200px;
}

.circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid black;
  background-color: aqua;
  text-align: center;
}

<div class="group">
    <div class="circle">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
    <div class="circle">5</div>
    <div class="circle">6</div>
    <div class="circle">7</div>
</div>

【问题讨论】：

stackoverflow.com/a/48916502/8620333 的重复项？
我想用css网格来实现。这两个问题都与 css flexboxes 相关
有什么理由使用 CSS 网格？作为旁注，这个问题与 flexbox 无关，有 3 种不同的方式，只有一种使用 flexbox
@TemaniAfif 我想在rtl 和ltr 之间切换时更改顺序。整个页面决定使用css-grid，所以我必须使用css网格。

标签： javascript html css sass css-grid

【解决方案1】：

使用 CSS 网格：

网格布局遵循的 CSS 属性称为方向。 direction: rtl 将通过一个额外的课程为您提供所需的内容：

.reverse-order{
  direction: rtl;
}

您的问题的 JSFiddle：Demo

没有 CSS 网格：

您可以通过添加以下 CSS 类来实现，根据需要使用适当的类：

.normal-order {
    position: absolute;
    text-align: left;
    float: left;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
.reverse-order > div {
    position: relative;
    float: right;
    display: block;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

【讨论】：

您的答案看起来很有希望。我已经检查了 rtl ltr 值的 direction 属性。这里的问题是 - 我不希望项目的顺序颠倒。我只想更改堆叠。当我们添加方向属性时，项目1 移动到了末尾，而不是停留在前面。