CSS将内容推送到页面

Question

在我正在处理的网页上，我有一个固定的#top部分，其中包含导航，导致下面的内容部分隐藏在其后面。

页面为：http://s361608839.websitehome.co.uk/pt-build/templatebuild/

我已经尝试将margin-top添加到#slider，并将margin-bottom添加到#top以尝试相互推开，但这些都没有奏效。

有什么想法吗？

Answer 1

#top为fixed，因此边距不起作用。

你必须做两件事来解决这个问题：

1. 让body padding-top或margin-top等于#top（151px）的高度
2. 给#top一个top:0;，使其仍然贴在页面顶部。

Answer 2

只需更改

div.anythingSlider {
  position: relative;
  padding: 110px 350px 28px 45px;
}

我将顶部填充从0更改为110px

Answer 3

只需将top: 0;添加到#topwrap，将margin-top: 100px添加到body。 （将100px替换为您喜欢的值，100px是查看第一个标题的最小值，但您的#topwrap高151px - 只需尝试看起来最好）

Answer 4

使用padding-top：150px;在class上的任何一个类滑动

Answer 5

您可以使用

div.anythingSlider{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

top: 50%会将您的内容转移，而translateY会将其重新放回原位。