html - 如何将元素定位在视口(viewport)左边缘之外？

Question

我有一个元素，其宽度是固定的 px 值或百分比。我希望它的边界框的右侧位于屏幕(或视口(viewport))的 x 坐标 −1 处，因此它的右侧接触屏幕的左侧 — 元素将变得不可见这个。

CSS right 或 left 属性是否有可用于百分比和固定 px 宽度的值，或者是否存在有其他方法可以实现吗？

Answer 1

这套 CSS 规则适用于此:

/* These rules position the element just beyond the left edge of the viewport. */
.positioned {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
}

/* You can open your developer tools (Right Click → Inspect Element) and change the `-100%` from above to see this box. */
.positioned {
  width: 100px;
  height: 100px;
  background: rebeccapurple;
  padding: 4px;
  color: white;
}

<div class="positioned">
  I’m on the left.
</div>

position: absolute和 left: 0将元素放在左边缘，但在视口(viewport)内。那么 transform: translateX(-100%) 是将元素向左移动的规则，正好是其宽度。

这是有效的，因为如果 translate 的参数, translateX , 或 translateY是百分比，那么这些百分比与元素的宽度和高度有关。对于其他属性，例如 left或 right ，它们与父级的宽度和高度有关。因此，left和 right不能在所有情况下用于此 — 相对或固定宽度 —，这就是为什么您对原始问题的回答是:不，这两个属性没有实现此目的的值(value)。可能有某种形式的诡计来实现这一点，但 CSS3 的 transform功能(或个别 — 尽管不太兼容 — 属性)使这变得容易。

---

如果您运行该代码段，您应该什么都看不到。如果您使用 browser console (dev tools) (点击 F12 )并检查代码片段的结果并找到 <div class="positioned"> ，你会看到这个: