css - 具有绝对定位的 Chid Div 与父级中的内容重叠

Question

根据这个 WordPress site .我在父级内部有一个子 div，它具有以下样式，即使父级具有已定义的居中宽度，也会强制它达到浏览器的全宽。以下是 child 的风格

.slider-controller 
{
position: absolute; 
width: 100%; 
left: 0; 
right: 0; 
top: 100; 
}

我有一个名为 Metaslider 的插件，可以在这个子 div 中打印全浏览器宽度的幻灯片。当我将内容放在父 div 中时会出现问题。当修改浏览器宽度时，子项的可变高度会与父项中的内容重叠。无论浏览器宽度如何，您将如何使此内容保持在子元素下方？ 感谢您对此有任何想法。

Answer 1

我无法确定幻灯片的确切高度，但因为:

• 你想要<main>中的第一段始终在幻灯片放映下方开始
• 幻灯片具有一致的相对高度(相对于视口(viewport) 宽度)

以下样式声明 - 使用视口(viewport)宽度单位 ( vw ) - 将考虑这两个因素:

main p:first-of-type {margin-top: 48vw;}