html - CSS 正确 :5% not of parent element but % of the window's width

Question

我构建了一个包含 8 张不同图片的 slider 。在每张图片上，我都写了一个标题。

我正在尝试使用 css 代码设置此标题:

.tp-caption{right:5%}

我的“.tp-caption”div 超出了我的屏幕。我读到 5% 是相对于父元素属性的。

在我的例子中，父元素是我的图片，它比我窗口的宽度大(图片居中)

你知道我是否可以指定 5% 的窗口屏幕吗？

我也试过 margin-right, float:right ... 但它总是同样的问题

谢谢你的帮助

Answer 1

right 属性仅应用于定位元素，如 MDN docs 中所述

因此，要使 right 有效，您的标题元素必须包含 position 的值之一，例如 relative， 绝对 或固定。

是的，右 偏移量将相对于元素的父元素。如果你想让它相对于窗口的视口(viewport)，你应该在元素上使用 position: fixed，从文档的自然流中移除元素，并使其仅受视口(viewport)。