您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

为什么具有位置的元素:与未定位的同级一起固定移动?

为什么具有位置的元素:与未定位的同级一起固定移动?

使用position: fixed,您的header元素将从文档流中删除

一个流入元素是main,它margin-top: 90px在您的代码中。

此元素的父元素是body,通常具有认值margin:8px

由于CSS ,该body元素的margin-top: 8px被折叠与main元素margin-top: 90px

结果,这两个现在具有相同边距的元素下移了90px。

html {

    background-color: green;

    height: 100%;

 }



body {

    background-color: pink;

    height: 100%;

}



header {

   position: fixed;

   border: 1px solid red;

}



main {

  margin-top: 90px;

  background-color:yellow;

}


<header>Project Header</header>

<main class="container" id="layout-mainContent">

    <div class="row" id="first-row">somecontent</div>

</main>

固定标头移动的原因如下:

要将标题移到视口的顶部,请使用top: 0

html {

background-color: green;

height: 100%;

}

body {

background-color: pink;

height: 100%;

}

header {

position: fixed;

border: 1px solid red;

top: 0px; / NEW /

}

main {

margin-top: 90px;

background-color:yellow;

}

<div class="row" id="first-row">somecontent</div>
其他 2022/1/1 18:16:02 有401人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶