代码:
<body>
<div class="header">
<div class="header-logo"><a href="#">Wanye Kest Designs</a></div>
<nav class="header-nav">
<a href="#">Work</a>
<a href="#">Conatact</a>
</nav>
</div>
<div class="pagess">Pages will go here</div>
</body>
//////////////////////////////////// CSS:
body {
background-color: #f3efed;
font-family: "arial", sans-serif;
color: #8e4e13;
margin: 0;
}
.header-logo a {
color: #8e4e13;
text-decoration: none;
}
.header-logo {
font-size: 24px;
font-weight: bold;
line-height: 28px;
}
.header {
padding: 15px;
overflow: auto;
}
.header-nav {
float: right;
}
.header-logo {
float: left;
}
.header-nav a {
color: #C3A286;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
line-height: 28px;
}
使用此代码，导航链接和页眉 Logo 是一个相同的垂直对齐方式，位于页面的相对两侧，并且文本“Pages will be here”完美地位于页眉 Logo 下方。
我的问题是，一旦我在 .header 选择器下方输入 position: fixed;，导航链接将自身重新定位以与页面左侧的页眉 Logo 重叠，并且“页面将在此处”文本将自身重新定位在页眉上方。
请理解我是网页设计(HTML、CSS、JS 等)的新手，我提到的培训计划没有故障排除部分、视频或论坛(HACKSAW 学院) .
有人能找出问题所在吗？我完全按照它告诉我的方式输入代码，但找不到解决方法。
最佳答案
Position: fixed;将元素从文档的正常流中取出，因此这就是重叠的来源。默认情况下，这会将所有元素移动到左上角。另外，float被 position: fixed 取代, 作为 float又是文档流position: fixed不是。唯一剩下的元素不是 position: fixed是你的 pagess类，它正确地占据了文档流的左上角。
这里有一些你可以使用的东西:
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #f3efed;
font-family: "arial", sans-serif;
color: #8e4e13;
margin: 0;
}
.header-logo a {
color: #8e4e13;
text-decoration: none;
}
.header-logo {
font-size: 24px;
font-weight: bold;
line-height: 28px;
}
.header {
padding: 15px;
overflow: auto;
position: fixed;
top: 0;
left: 0;
width: 100vw;
}
.header-nav {
background: green;
display: inline-block;
vertical-align: bottom;
margin-left: calc(55% - 100px);
}
.header-logo {
background: red;
display: inline-block;
vertical-align: bottom;
}
.header-nav a {
color: #C3A286;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
line-height: 28px;
}
.pagess {
margin-top: 48px;
margin-left: 24px;
}<body>
<div class="header">
<div class="header-logo"><a href="#">Wanye Kest Designs</a></div>
<nav class="header-nav">
<a href="#">Work</a>
<a href="#">Conatact</a>
</nav>
</div>
<div class="pagess">Pages will go here</div>
</body>关于html - 位置 : fixed; breaking my web page，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36611340/