Question

在网站上工作，我正在努力使<header></header>和导航保留在网站顶部。我能够解决一些我似乎无法解决的问题。

我使用的代码是：

header {
    background:#000;
    position:fixed;
    width: 100%;
    top: 0;
}

现在，当我将此代码放入其中时，<header>标记中的所有内容都会在＆＃39;＆＃39;下面滚动，并且还会在通过它的情况下向下滚动。我想知道是否有办法让网站的其余部分落在＆＃39;＆＃39;＆＃39;或者滚动到<header>下面或通过<header>？

我尝试过<margin-bottom> RestWebClient.get().getFirstImage() .flatMap(firstImage -> /* first image success */ ? RestWebClient.get().getSecondImage() : Observable.just(null), (firstImage, secondImage) -> Pair.create(firstImage, secondImage)) .subscribeOn(Schedulers.newThread()) .observeOn(AndroidSchedulers.mainThread()) .subscribe(imagePair -> mainFragmentPresenterInterface.showImages(imagePair));来创建空间，以便在网站首次加载时文字可见，但这似乎无法解决。

解决此问题的任何链接？

Answer 1

只需在身体的标题和边距上加上一些高度。

header {
    background:#000;
    position:fixed;
    width: 100%;
    top: 0;
    height: 60px;
}

body {
    margin-top: 60px
}

Answer 2

给header一个z-index:9999以便它始终出现top的内容也会提供min-height:50px，希望它能解决您的问题：）

<强>感谢

header {
background:#000;
position:fixed;
width: 100%;
min-height:50px;
padding:50px 10px 5px;
top: 0;
left:0px;
z-index:9999;
overflow:hidden;
}

Answer 3

除了标题之外，无论你的内容是什么，都要给它padding-top: [height of header]。这样可以避免重叠。

CSS Fixed Header Top：0;

3 个答案: