Question

我正在尝试为新网页构建一个滑块。这为我建立一个小固定头，全宽图片滑板和其他东西的设计。现在，当我添加div in class inhalt时，我的固定标题不再位于顶部，而div与名称的滑块ist大于100％

enter image description here

<body>

    <div id="header"></div>
    <div id="sliderContainer">
        <ul class="slides">
            <li>
                <img src="img/clouds-2517653_1920.jpg"/>
            </li>
            <li>
                <img src="img/drop-of-water-2396748_1920.jpg"/>
            </li>
        </ul>
    </div>

    <div class="inhalt">
        <h5>Lorem impsum</h5>
        <p>
        Bacon ipsum dolor amet sirloin kevin boudin ribeye short ribs chicken shank. Turkey ham hock cow prosciutto drumstick.
        Kevin boudin pork loin beef. Pork tongue bresaola, frankfurter pig meatball porchetta boudin bacon ham landjaeger t-bone
        short ribs. Short loin turkey rump jowl pork belly strip steak chicken ground round doner tenderloin salami bacon landjaeger pork
        loin pancetta. Cow turkey doner landjaeger ham hock rump.
        </p>
    </div>

</body>

CSS : 

    ul {
    margin: 0;
    padding: 0;
}

#header {
    position: fixed;
    width: 100%;
    height: 150px;
    background-color: #194696;

}

#sliderContainer {
    position: relative;
    max-width: 1920px;
    height: 600px;
    top: 300px;
    background-color: darkgray;
    box-sizing: border-box;
    float: left;
    overflow: hidden;
}

#slides {
    float: left;
}

.inhalt{
    position: relative;
    margin: 0 auto;
    height: 600px;
    max-width: 800px;
}

Answer 1

所以你是另一个职位的受害者：固定;

固定位置元素相对于视口或浏览器窗口本身定位。滚动窗口时视口不会改变，因此固定定位元素将保持在滚动页面时的位置，创建有点像旧学校“帧”日的效果。有关详细信息read this

将位置固定属性赋予元素后，它就不再影响页面上的其他元素。与绝对位置相似。

因此，当您提供#header {position: fixed; top: 0; height: 150px;}时，您声明始终将标题保留在浏览器的顶部，此标题的高度将为150px。但是现在页面的其他元素将无法看到#header。如果您添加另一个元素，该元素将从浏览器的开头（顶部）开始，并且将在您的标题后面。

因此，作为软修复，您需要提供新元素（滑块）top: 150px;或margin-top: 150px;。这意味着滑块将从浏览器顶部开始150px。我说150px因为那是你头部的高度。因此滑块将从标题下方开始，您将没有任何问题。

Refer this website。他们做了同样的事情你正在寻找，但他们使用的是margin-top，这比top更好。

解决方案：

#header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 150px;
    background-color: #194696;
}

#sliderContainer {
    position: relative;
    max-width: 1920px;
    height: 600px;
    margin-top: 150px;
    background-color: darkgray;
    box-sizing: border-box;
    float: left;
    overflow: hidden;
}

HTML位置错误

1 个答案: