jssor 滑块标题中的填充问题

Question

我在 jssor 滑块的标题中使用了填充，但我发现它会导致标题出现问题，并且某些标题的内容无法正确显示。
这是我应用填充的代码。

.captionOrange, .captionBlack {
color: #fff;
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 4px;
padding: 20px;
}

我在introduction-slider.source.html 内部demos-jquery 中使用了此代码。
当我将position: relative; 用于字幕时，它修复了上述问题，但它忽略了top css 属性并且没有使用字幕父级的顶部。
这是一张有问题的图片。

更新：
以下链接顶部有一个滑块，这是我的意思。请检查其中的一个标题，您可以看到一条 css 规则 .captionOrange, .captionBlue, .captionBlack, .captionSymbol，因此请在其中添加 padding: 20px 以查看结果。当您添加padding: 20px 时，它会剪切一些字幕内容。
jssor slider introduction theme

Answer 1

好的，我明白了移动字幕为您带来这些结果的原因。我看了看左上角一个叫.captionOrange：

<div u="caption" t="CLIP|LR" du="1500" class="captionOrange" style="position: absolute; left: 20px; top: 30px; width: 500px; height: 30px; clip: rect(0px 500px 30px 0px);"> 
Touch swipe and responsive javascript image slider
</div>

在这个标签的末尾注意以下部分：

clip: rect(0px 500px 30px 0px);

这是一个clip 矩形，宽 500 像素，高 30 像素（高度），将 30 像素增加到您想要的任何值，您将有更多的文本空间。有关clip 属性的详细信息，请参阅此article。基本上，clip 属性将创建一个窗口来确定元素中可见的内容。