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

Question

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

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

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

Answer 1

我无法确切知道幻灯片的高度是什么，但是从那以后：

• 您希望<main>中的第一段始终位于幻灯片放映的正下方
• 幻灯片显示具有一致的相对高度（相对于视口 宽度）

以下样式声明 - 使用视口宽度单位（vw） - 将考虑这两个因素：

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