容器 margin-top 和视频播放器 css 问题

Question

我正在编辑现有的 Wordpress 主题（已创建 child 主题），但遇到格式问题。在网站的移动和桌面版本上。

我的第一个问题是第一个 post 加载在 header-logo 容器下，有时取决于浏览器大小，我注意到这种情况在移动设备中经常发生。 "PROMO" post 不见了。

我增加了 margin-top 和 padding-top 属性，但它似乎没有解决问题。我可能必须更新容器的定位 div 吗？如果是这样，什么是合适的方法？阅读了几篇文章并尝试了很多 css 编辑，但我觉得我只是在兜圈子。

我遇到的另一个问题是 post 上嵌入的媒体浮动在我的 "fixed" header 之上，而不是相反。我已经将 "position" 属性修改为 absolute 但它似乎破坏了整个页面的格式？在这里呆了几个小时，这让我发疯。任何新的见解都会受到赞赏。我运行没有想法可以尝试。

]3

Answer 1

为了使 header 出现在其他评论的顶部，有一个 z-index 属性，如@Milan 的评论所述。基本上，你要做的是...

#header-container {
    z-index: 999;
}
/*all the other elements on page except body*/ {
    z-index: /*less than 999*/;
}

有了这个，header 应该 出现在页面上每个元素的顶部 。

Answer 2

如果您的导航高度为 110 像素，可以尝试向容器添加高度 + 大约 20 像素的边距偏移量，如下所示：

.container {
    margin-top: 130px;
}

Answer 3

在 grid.css 行 3

上将 clear: both 添加到 .container

Container margin-top & video player css issues