Question

代码：

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

使用此代码，导航链接和标题徽标是一个相同的垂直对齐，页面的两侧，文本“页面将在这里”完美地位于标题徽标下方。

我的问题是，只要我在 .header 选择器下方输入 position：fixed; ，导航链接重新定位自身以重叠页面左侧的标题徽标，“页面将在此处”文本将其自身重新定位在标题上方。

请理解我对网页设计（HTML，CSS，JS等）非常陌生，我所参考的培训计划没有故障排除部分，视频或论坛（HACKSAW学院）

有人可以识别问题吗？我正在按照它告诉我的方式输入代码，但无法找到解决方法。

without position: fixed;

With position: fixed;

Answer 1

Position: fixed;将元素从文档的正常流中取出，因此这是重叠的来源。默认情况下，这会将所有元素移动到左上角。此外，float已被position: fixed取代，因为float位于文档流中，而position: fixed则不是。唯一剩下的position: fixed元素是pagess类，它正确地占据了文档流中的左上角。

以下是您可以使用的内容：

＆＃13;

*, :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;
}

＆＃13;

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

＆＃13;

位置：固定;打破我的网页

1 个答案: