Question

希望能够快速轻松地回答这个问题。我正在写一个有固定标题/导航栏的网站。作为导航栏的一部分，主页的书签部分有相对链接（使用W3.CSS）：

<header class="w3-container w3-top w3-blue-grey"
            style="height:150px;">
        <div class="w3-row">
            <div class="w3-col"
                 style="width:75px;
                        height:75px;">
                <img    src="/images/BW_Logo.png"
                        alt="TIVA Calc"
                        style="width:75px; height:75px;">
            </div>
            <div class="w3-rest">
                <h2>TIVA Calculator</h2>
            </div>

        </div>
            <ul style="list-style-type:none;
                       margin:10;
                       padding:0">
                <li style="float:left;
                           text-align: center;">
                    <a href="#drugCalc"
                       style="display:block;
                              padding:8px;
                              text-decoration: none;">
                       Conc.</a>
                </li>
                <li style="float:left;
                           text-align: center;">
                    <a href="#heightCalc"
                       style="display:block;
                              padding:8px;
                              text-decoration: none;">Height</a>
                </li>
                <li style="float:left;
                           text-align: center;">
                    <a href="#weightCalc"
                       style="display:block;
                              padding:8px;
                              text-decoration: none;">Weight</a>
                </li>
                <li style="float:left;
                           text-align: center;">
                    <a href="#ageCalc"
                       style="display:block;
                              padding:8px;
                              text-decoration: none;">Age</a>
                </li>
                <li style="float:left;
                           text-align: center;">
                    <a href="#calcResults"
                       style="display:block;
                              padding:8px;
                              text-decoration: none;">Values</a>
                </li>
            </ul>
    </header>

问题是固定导航栏位于Z轴顶部，下面的内容没有正确浮动。为了解决这个问题，我将内容封装在绝对定位的容器中，以便显示顶部的内容。（我最初尝试添加一些<br>以使顶部向下，但认为容器将是更好的解决方案。）

我能想到的选择是：

以某种方式将href=#foo更改为指向实际部分150px之上的某个地方我链接到
将href更改为指向目标

150px

更改<header>元素，使其不会位于剩余内容之上

我可以看到前两个问题，特别是在响应式设计方面。我不知道如何让最后一个工作。

但是，我的技能/知识已经不足了！我确信这已经定期处理。有什么想法吗？

具有更改参考点的相对链接

0 个答案: