使用CSS交换元素？

我的布局相当简单，如下所示：

<div class="card">
    <span class="attack">1</div>
    <span class="defence">2</div>
</div>

1.
2.

---

它们通过简单的

显示：block

排列在一起。我想要达到的是当一张牌位于特定区域时，底部显示“攻击”，顶部显示“防御”。我知道我可以用jQuery实现，但是我可以用纯CSS实现同样的效果吗？

第一个想法是在.card中使用绝对定位

.card      { width:100px; height:50px; position:relative; }
  .attack  { width:100px; height:25px; position:absolute; top:25px; }
  .defense { width:100px; height:25px; position:absolute; top:0; }

---

在本例中，.attack（可视）位于.defence下面。但是请注意，如果禁用CSS，将看到真正的排列方式。

不，不能。即使您决定尝试在CSS中“破解”它，生成的CSS将是巨大的、混乱的，并且不容易维护。通过比较，相应的jQuery代码将非常简单，易于理解和维护。

如果您知道元素的高度，则可以使用

位置：相对（分别为正值和负值）或
位置：绝对值。但这一切都非常骇人，并且有很多副作用——我会用Javascript来代替。你可以使用（如果你只想在div.card中进行交换）：

但正如其他人所提到的，这可能会产生一些意想不到的副作用。例如，上面的示例将仅为1个线块正确移动交换位置。
从技术上讲，这是一个业务规则，而不是您的装饰层的领域

在HTML文档中，元素从第一个元素到最后一个元素的顺序具有语义意义——我猜想，您的情况并没有什么不同，因为您试图根据上下文指示从一个元素到下一个元素（在文档中，而不仅仅是视觉表示）的重要性差异

因此，您的方法应该是JQuery，或者其他一些方法，根据这两个元素在文档中的顺序来更改它们之间关系的含义。CSS只是为了改变它们的外观

在这种情况下，思考“如果有人看不到这些元素，不得不依靠屏幕阅读器按照它们在文档中出现的顺序来阅读它们，会有帮助吗？这些信息（不仅仅是两个元素的内容，还有它们的关系）仍然是正确和可理解的吗？”

你可能不想让盲人能够接触到这一点，但对于如何处理这样的问题，这通常是一个很好的理智检查。
我很确定这会起作用：

.card {
    width: 100px;
    height: 150px;
    float: left;
}

.attack, .defence {
    width: 100px;
    height: 75px;
    clear: right;
}

/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
    float: left;
}
.attack-top .card .defence {
    float: right;
    height: Wpx;
    padding-top: Xpx;
}


/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
    float: right;
    height: Ypx;
    padding-top: Zpx;
}
.defence-top .card .defence {
    float: left;
}

您的描述中缺少一些细节，因此我将尝试填写我的假设，您可以让我知道这些假设是否有效


你说“当一张卡在特定区域时”。我假设这些区域可以由不同的包含类来表示（
.attack top
和
.defence top
，但可以根据需要重命名）
我假设
.card
的宽度为100px，高度为150px。如果这些宽度和高度值错误，请填写正确的值并进行适当的重新计算。如果
.card
没有固定的宽度/高度，它可能仍然可以工作，但我不太自信，您将无法将底部文本放到卡的最底部（就在顶部文本的下方）
因为这是错误的。在CSS中使用绝对/相对定位很容易做到这一点。这没有错。除非你增加额外的限制（如固定高度），否则你不能简单地交换它们。David，根据OP中的信息，这是错误的。如果“不，你不能”是因为潜在的未来信息而有效，那么这是对任何问题的有效回答。如果任意使用，它在逻辑上会导致荒谬。没有办法像OP中那样任意定义“特定区域”，在这种情况下，第一个
span
出现在第二个
span
下面。有多种方法可以使第一个
span
显示在第二个
span
的下方，但不能用于多个预定义区域。是的，所有三个元素的高度都是固定的。宽度也一样。卡片的行为相同。这是改变展示的情况，而不是内容。我不是指卡片的内容。文档顺序中的卡片关系中存在信息。如果没有，你就不会在意它们出现的顺序。您希望更改卡片的顺序（无论其内容如何），这表明这确实是一个文档内容问题，而不仅仅是表面问题。如何将卡片从一个区域移动到另一个区域？使用jQuery。有些是在一个区域创建的，有些是在另一个区域创建的。有些人被感动了。
.card {
    width: 100px;
    height: 150px;
    float: left;
}

.attack, .defence {
    width: 100px;
    height: 75px;
    clear: right;
}

/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
    float: left;
}
.attack-top .card .defence {
    float: right;
    height: Wpx;
    padding-top: Xpx;
}


/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
    float: right;
    height: Ypx;
    padding-top: Zpx;
}
.defence-top .card .defence {
    float: left;
}