HTML 位置错误

Question

我正在尝试为新页面构建滑块。那是为了我构建一个带有固定 header、全宽图片滑块和其他一些东西的小型设计。现在，当我添加带有 class 的 div 吸入时，我的固定 header 不再位于顶部，并且 div 的名称 slider ist 大于 100%

<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

所以你是位置的另一个牺牲品：已修复；

固定位置元素相对于视口或浏览器 window 本身定位。滚动 window 时视口不会改变，因此固定定位的元素将在页面滚动时保持在原位，产生有点像旧学校 "frames" 天的效果。更多详情 read this

一旦你给一个元素固定位置属性，它就不再影响页面上的其他元素。类似于绝对位置。

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

后面

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

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 位置错误

HTML position bug

html

css

position

fixed

css-position