HTML位置错误_Html_Css_Position_Css Position_Fixed

HTML位置错误

html css

HTML位置错误,html,css,position,css-position,fixed,Html,Css,Position,Css Position,Fixed,我正在尝试为新页面构建一个滑块。这是为了我建立一个固定标题的小设计，全幅图片滑翔机，和其他一些东西。现在，当我在Alt中添加带有类的div时，我的固定标题不再位于顶部，而带有名称slider的div大于100% <body> <div id="header"></div> <div id="sliderContainer"> <ul class="slides"> <l

我正在尝试为新页面构建一个滑块。这是为了我建立一个固定标题的小设计，全幅图片滑翔机，和其他一些东西。现在，当我在Alt中添加带有类的div时，我的固定标题不再位于顶部，而带有名称slider的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;
}








奥雷姆·英普苏姆

培根ipsum dolor amet牛腰肉kevin boudin ribeye短排骨鸡腿。火鸡火腿鸡腿牛火腿鸡腿。
凯文·鲍丁猪里脊牛肉。猪舌肉丸、法兰克福肉丸、波切塔肉丸、培根火腿、兰德杰格t形骨
短肋骨。短里脊火鸡后腿下颚猪肉肚皮条状牛排鸡肉磨碎圆面嫩里脊萨拉米培根兰德杰格猪肉
腰肉潘切塔。母牛火鸡多纳兰德杰格火腿飞节臀部。

CSS:
保险商实验室{
保证金：0；
填充：0；
}
#标题{
位置：固定；
宽度：100%；
高度：150像素；
背景色：#194696；
}
#幻灯片容器{
位置：相对位置；
最大宽度：1920像素；
高度：600px；
顶部：300px；
背景色：暗灰色；
框大小：边框框；
浮动：左；
溢出：隐藏；
}
#幻灯片{
浮动：左；
}
.吸入{
位置：相对位置；
保证金：0自动；
高度：600px；
最大宽度：800px；
}

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

固定位置元素相对于视口或浏览器窗口本身进行定位。当窗口滚动时，视口不会改变，因此当页面滚动时，固定位置的元素将保持在原来的位置，产生一种有点像旧式“框架”时代的效果。欲知详情

一旦您将position fixed属性赋予一个元素，它就不再影响页面上的其他元素。类似于绝对位置

因此，当您给出

#header{position:fixed；top:0；height:150px；}

时，您声明始终将header保持在浏览器顶部，并且此header的高度将为150px。但是现在页面的其他元素将无法看到#标题。如果添加另一个元素，则该元素将从浏览器的开头（顶部）开始，并位于标题后面

因此，作为一个软修复，您需要给新元素（slider）

top:150px或页边距顶部：150px。这意味着滑块将从浏览器顶部开始150px。我说150px是因为这是你的头的高度。因此，滑块将从标题下方开始，您将不会遇到任何问题
。他们做了和你想做的一样的事情，但是他们使用的是页边页首，这比页首要好
解决方案：
#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;
}

添加top:0；给你的头像谢谢你！但是你能解释我为什么要设置这个吗？我想知道为什么我必须申报一个div，而不是另一个div。