HTML 位置错误答案

【问题标题】：HTML position bugHTML 位置错误
【发布时间】：2017-07-21 06:51:46
【问题描述】：

我正在尝试为新页面构建滑块。这用于我构建一个带有固定标题、全宽图片滑块和其他一些东西的小设计。现在，当我添加带有类 inhalt 的 div 时，我的固定标题不再位于顶部，并且名称滑块的 div 大于 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;
}

【问题讨论】：

添加顶部：0；到标题的 CSS
谢谢！但是你能解释一下为什么我必须设置这个吗？我想知道为什么我必须为另一个 div 声明什么。

标签： html css position css-position fixed

【解决方案1】：

所以你是另一个位置的牺牲品：固定;

固定位置元素相对于视口或浏览器窗口本身定位。当窗口滚动时，视口不会改变，因此当页面滚动时，固定定位的元素将保持在原来的位置，创造一种有点像老式“框架”时代的效果。更多详情read this

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

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

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

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;
}

【讨论】：