如何防止CSS旋轉元素與其他元素重疊？

CSS 中垂直對齊的旋轉元素

在 CSS 中，您可以使用writing-mode 屬性垂直旋轉文字。但是，旋轉文字可能會影響其父元素的位置。這可能會導致意外結果，例如文字與其他元素重疊。

問題：

考慮以下範例：

<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

此程式碼產生以下版面：

[列文字影像，第三列旋轉90度]

如您所見，旋轉後的文字與其他元素重疊。

解決方案：

要解決此問題，您可以使用父元素上的writing-mode 屬性來垂直旋轉文字。這將確保旋轉的文字在父元素內正確對齊。

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

此程式碼會產生以下佈局：

[四列中的文字影像，其中第三列旋轉Vertical]

如您所見，旋轉後的文字現在在父元素內垂直對齊，並且不與其他元素重疊。

以上是如何防止CSS旋轉元素與其他元素重疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！