HTML + CSS | 主要内容不与导航栏重叠的问题

Question

我有一个主要内容区域，我想在页面中垂直和水平居中。

我添加了一个 css 导航栏，但是现在页面在垂直和水平方向都有滚动条，并且主 div 不再居中。它似乎被导航栏向右和向下移动。我试图让主放在中央，然后导航“覆盖”其他所有内容，这样它就不会影响主 div 的定位。

我认为这与 z-index 有关，但更改这些值似乎没有任何效果。任何人都可以指导我获取资源以了解解决此问题的正确方法吗？

谢谢你。

（因为我才刚刚开始学习，所以这一切都很杂乱无章！）

const textElement = document.getElementById('text')

const optionButtonsElement = document.getElementById('option-buttons')

let state = {}

function startGame() {

    state = {};

    showTextNode(1);

}

function showTextNode(textNodeIndex) {

    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);

    textElement.innerText = textNode.text;

    while(optionButtonsElement.firstChild) {

        optionButtonsElement.removeChild(optionButtonsElement.firstChild);

    }

    document.getElementById('image').style.display = "block"

    textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none";

    textNode.options.forEach(option => {

        if(showOption(option)) {

            const button = document.createElement('button');

            button.innerText = option.text;

            button.classList.add('btn')

            button.addEventListener('click', () => selectOption(option));

            optionButtonsElement.appendChild(button);

        }

    })

}

function showOption(){

    return true;

}

function selectOption(option) {

    const nextTextNodeId = option.nextText;

    state = Object.assign(state, option.setState)

    showTextNode(nextTextNodeId)

}

const textNodes = [

    {

        id: 1,

        text: 'Case Study: BioPharma Expansion',

        options: [

            {

                text: 'Start',

                setState: {},

                nextText: 2

            }

        ]

    },

 

Answer 1

您可以将主体填充和边距设置为 0，body {    z-index: 0;    background-color: black;    width: 100vw;    height: 100vh;    padding: 0;    margin: 0}这解决了您当前的问题，但可能会在其他 div 中再次遇到同样的问题，我通常做的是将所有填充和边距设置为零。像这样* {  margin: 0;  padding: 0;  box-sizing: border-box}你需要学习如何调试你的 CSS：https ://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

Answer 2

问题不在于您navbar，而body在于您的网页。只需将margin: 0and添加padding: 0到您的身体，滚动条就会消失。检查并运行以下代码片段或此CodePenmargin: 0&nbsp;，以获取添加了属性的网页的实际示例：const textElement = document.getElementById('text')const optionButtonsElement = document.getElementById('option-buttons')let state = {}function startGame() {&nbsp; &nbsp; state = {};&nbsp; &nbsp; showTextNode(1);}function showTextNode(textNodeIndex) {&nbsp; &nbsp; const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);&nbsp; &nbsp; textElement.innerText = textNode.text;&nbsp; &nbsp; while(optionButtonsElement.firstChild) {&nbsp; &nbsp; &nbsp; &nbsp; optionButtonsElement.removeChild(optionButtonsElement.firstChild);&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById('image').style.display = "block"&nbsp; &nbsp; textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none";&nbsp; &nbsp; textNode.options.forEach(option => {&nbsp; &nbsp; &nbsp; &nbsp; if(showOption(option)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const button = document.createElement('button');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button.innerText = option.text;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button.classList.add('btn')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; button.addEventListener('click', () => selectOption(option));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; optionButtonsElement.appendChild(button);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })}function showOption(){&nbsp; &nbsp; return true;}function selectOption(option) {&nbsp; &nbsp; const nextTextNodeId = option.nextText;&nbsp; &nbsp; state = Object.assign(state, option.setState)&nbsp; &nbsp; showTextNode(nextTextNodeId)}const textNodes = [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; text: 'Case Study: BioPharma Expansion',&nbsp; &nbsp; &nbsp; &nbsp; options: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'Start',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setState: {},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextText: 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; &nbsp; text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',&nbsp; &nbsp; &nbsp; &nbsp; options: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: "I'd like to know more about BioPharma's revenue",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setState: {},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextText: 3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: "I'd like to know more about BioPharma's cost structure",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setState: {},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextText: 3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; &nbsp; text: "BioPharma's revenue has increased year on year by 12% since 2014",&nbsp; &nbsp; &nbsp; &nbsp; options: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: "What about costs?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setState: {},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextText: 4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 4,&nbsp; &nbsp; &nbsp; &nbsp; text: "BioPharma's cost structure is shown below in Figure 1",&nbsp; &nbsp; &nbsp; &nbsp; imageLink: "figure1a.png",&nbsp; &nbsp; &nbsp; &nbsp; options: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: "Here is some stuff",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }]startGame();*, *::before, *::after {&nbsp; &nbsp; box-sizing: border-box;}&nbsp; &nbsp;.nav {&nbsp; &nbsp;&nbsp;}body {&nbsp; &nbsp; z-index: 0;&nbsp; &nbsp; background-color: black;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; padding: 0px;}.main {&nbsp; &nbsp; z-index: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; font-family: 'Times New Roman', Times, serif;}#menuToggle {&nbsp; &nbsp; display: block;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 40px;&nbsp; &nbsp; left: 40px;&nbsp; &nbsp; z-index: 2;&nbsp; &nbsp; -webkit-user-select: none;&nbsp; &nbsp; user-select: none;}#menuToggle a {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: white;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; transition: color 0.3s ease;}#menuToggle a:hover {&nbsp; &nbsp; color: tomato;}#menuToggle input {&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 40px;&nbsp; &nbsp; height: 32px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: -7px;&nbsp; &nbsp; left: -5px;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; z-index: 3;&nbsp; &nbsp; -webkit-touch-callout: none;}#menuToggle span {&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 33px;&nbsp; &nbsp; height: 4px;&nbsp; &nbsp; margin-bottom: 5px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; background: white;&nbsp; &nbsp; border-radius: 3px;&nbsp; &nbsp; z-index: 2;&nbsp; &nbsp; transform-origin: 4px 0px;&nbsp; &nbsp; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity 0.55s ease;}#menuToggle span:first-child {&nbsp; &nbsp; transform-origin: 0% 0%;}#menuToggle span:nth-last-child(2) {&nbsp; &nbsp; transform-origin: 0% 100%;}#menuToggle input:checked ~ span {&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; transform: rotate(45deg) translate(-2px, -1px);&nbsp; &nbsp; background: #232323;}&nbsp;&nbsp;&nbsp;#menuToggle input:checked ~ span:nth-last-child(3) {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transform: rotate(0deg) scale(0.2, 0.2);}&nbsp;&nbsp;#menuToggle input:checked ~ span:nth-last-child(2) {&nbsp; &nbsp; transform: rotate(-45deg) translate(0, -1px);}#menu {&nbsp; position: absolute;&nbsp; width: 300px;&nbsp; margin: -100px 0 0 -50px;&nbsp; padding: 50px;&nbsp; padding-top: 125px;&nbsp;&nbsp;&nbsp; background: none;&nbsp; list-style-type: none;&nbsp; -webkit-font-smoothing: antialiased;&nbsp;&nbsp;&nbsp; transform-origin: 0% 0%;&nbsp; transform: translate(-100%, 0);&nbsp;&nbsp;&nbsp; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}#menu li {&nbsp; padding: 10px 0;&nbsp; font-size: 22px;}#menuToggle input:checked ~ ul{&nbsp; transform: none;}.container {&nbsp; &nbsp; width: 1000px;&nbsp; &nbsp; height: 90%;&nbsp; &nbsp; max-width: 80%;&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; border-radius: 7px;&nbsp; &nbsp; box-shadow: 0 0 10px 2px;&nbsp; &nbsp; display: grid;&nbsp; &nbsp; grid-template-rows: 60% 40%;}.container-lower {&nbsp; &nbsp; border-top: 10px solid rgba(0,0,0,1);&nbsp; &nbsp; position: relative;}.container-upper {&nbsp; &nbsp; position: relative;}.btn-grid {&nbsp; &nbsp; display: grid;&nbsp; &nbsp; grid-template-columns: repeat(1, auto);&nbsp; &nbsp; gap: 20px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; left: 50%;&nbsp; &nbsp; transform: translateY(-50%) translateX(-50%);}.btn {&nbsp; &nbsp; background-color: white;&nbsp; &nbsp; border: 2px solid black;&nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; padding: 10px 10px;&nbsp; &nbsp; width: 400px;&nbsp; &nbsp; color: black;&nbsp; &nbsp; outline: none;&nbsp; &nbsp; font-size: 25px;&nbsp; &nbsp; font-family: 'Times New Roman', Times, serif;}.btn:hover {&nbsp; &nbsp; border-color: grey;&nbsp; &nbsp; color: grey;}#text {&nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; text-align: center;}#image {&nbsp; &nbsp; width: 650px;&nbsp; &nbsp; height: 150px;&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; margin: 40px auto 0px auto;&nbsp; &nbsp; background-size: 650px 150px;}.wrapper {&nbsp; &nbsp; width: 70%;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; left: 50%;&nbsp; &nbsp; transform: translateY(-50%) translateX(-50%);}&nbsp; &nbsp; <div class="nav">&nbsp; &nbsp; &nbsp; &nbsp; <div id="menuToggle">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul id="menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Home</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>About</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Info</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Contact</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="main">&nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container-upper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="text" class="text">Text</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="image"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container-lower">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="option-buttons" class="btn-grid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn">Option 1</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn">Option 2</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="btn">Option 3</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>根据这个其他SO 线程margin上接受的答案，默认情况下和默认情况下的原因padding是0因为浏览器具有不同的默认样式表。

Answer 3

将您的 css 正文属性更改为以下内容：body {&nbsp; &nbsp; z-index: 0;&nbsp; &nbsp; background-color: black;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; padding: 0px;&nbsp; &nbsp; margin: 0px;}通过将主体的内边距和边距设置为 0px，您将摆脱垂直和水平滚动条 :)