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

Question

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

我添加了一个 css 导航栏，但现在页面在垂直和水平方向都有滚动条，并且主 div 不再居中。它似乎被导航栏向右和向下移动。我试图让主 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
            }
        ]
    },
    {
        id: 2,
        text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
        options: [
            {
                text: "I'd like to know more about BioPharma's revenue",
                setState: {},
                nextText: 3
            },
            {
                text: "I'd like to know more about BioPharma's cost structure",
                setState: {},
                nextText: 3
            }   
        ]
    },
    {
        id: 3,
        text: "BioPharma's revenue has increased year on year by 12% since 2014",
        options: [
            {
                text: "What about costs?",
                setState: {},
                nextText: 4
            }
        ]
    },
    {
        id: 4,
        text: "BioPharma's cost structure is shown below in Figure 1",
        imageLink: "figure1a.png",
        options: [
            {
                text: "Here is some stuff",
            }
        ]
    }
]

startGame();

*, *::before, *::after {
    box-sizing: border-box;
}   

.nav {
    z-index: 1;
}

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
}

.main {
    z-index: 0;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: 'Times New Roman', Times, serif;
}

#menuToggle {
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;

    z-index: 2;

    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a {
    text-decoration: none;
    color: white;
    
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: tomato;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    z-index: 3;

    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: white;
    border-radius: 3px;

    z-index: 2;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}
  

 #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
  

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: none;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

.container {
    width: 1000px;
    height: 90%;
    max-width: 80%;
    background-color: white;
    border-radius: 7px;
    box-shadow: 0 0 10px 2px;
    display: grid;
    grid-template-rows: 60% 40%;
}

.container-lower {
    border-top: 10px solid rgba(0,0,0,1);
    position: relative;
}

.container-upper {
    position: relative;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.btn {
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px 10px;
    width: 400px;
    color: black;
    outline: none;
    font-size: 25px;
    font-family: 'Times New Roman', Times, serif;
}

.btn:hover {
    border-color: grey;
    color: grey;
}

#text {
    font-size: 30px;
    text-align: center;
}

#image {
    width: 650px;
    height: 150px;
    background-repeat: no-repeat;
    margin: 40px auto 0px auto;
    background-size: 650px 150px;
}

.wrapper {
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <script defer src="game.js"></script>
    <title>Case Study 1</title>
</head>

<body>
    <div class="nav">
        <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="#">
                    <li>Home</li>
                </a>
                <a href="#">
                    <li>About</li>
                </a>
                <a href="#">
                    <li>Info</li>
                </a>
                <a href="#">
                    <li>Contact</li>
                </a>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="container-upper">
                <div class="wrapper">
                    <div id="text" class="text">Text</div>
                    <div id="image"></div>
                </div>
            </div>
            <div class="container-lower">
                <div id="option-buttons" class="btn-grid">
                    <button class="btn">Option 1</button>
                    <button class="btn">Option 2</button>
                    <button class="btn">Option 3</button>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

将您的 css 正文属性更改为以下内容：

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
    padding: 0px;
    margin: 0px;
}

通过将主体的内边距和边距设置为 0px，您将摆脱垂直和水平滚动条 :)

Answer 2

问题不在于您的navbar，而在于您网页的body。只需将margin: 0 和padding: 0 添加到您的body 中，滚动条就会消失。

检查并运行以下 代码片段 或 CodePen 以获取添加了 margin: 0 属性的网页的实际示例：

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
            }
        ]
    },
    {
        id: 2,
        text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
        options: [
            {
                text: "I'd like to know more about BioPharma's revenue",
                setState: {},
                nextText: 3
            },
            {
                text: "I'd like to know more about BioPharma's cost structure",
                setState: {},
                nextText: 3
            }   
        ]
    },
    {
        id: 3,
        text: "BioPharma's revenue has increased year on year by 12% since 2014",
        options: [
            {
                text: "What about costs?",
                setState: {},
                nextText: 4
            }
        ]
    },
    {
        id: 4,
        text: "BioPharma's cost structure is shown below in Figure 1",
        imageLink: "figure1a.png",
        options: [
            {
                text: "Here is some stuff",
            }
        ]
    }
]

startGame();

*, *::before, *::after {
    box-sizing: border-box;
}   

.nav {
    
}

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
}

.main {
    z-index: 0;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: 'Times New Roman', Times, serif;
}

#menuToggle {
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;

    z-index: 2;

    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a {
    text-decoration: none;
    color: white;
    
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: tomato;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    z-index: 3;

    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: white;
    border-radius: 3px;

    z-index: 2;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}
  

 #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
  

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: none;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

.container {
    width: 1000px;
    height: 90%;
    max-width: 80%;
    background-color: white;
    border-radius: 7px;
    box-shadow: 0 0 10px 2px;
    display: grid;
    grid-template-rows: 60% 40%;
}

.container-lower {
    border-top: 10px solid rgba(0,0,0,1);
    position: relative;
}

.container-upper {
    position: relative;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.btn {
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px 10px;
    width: 400px;
    color: black;
    outline: none;
    font-size: 25px;
    font-family: 'Times New Roman', Times, serif;
}

.btn:hover {
    border-color: grey;
    color: grey;
}

#text {
    font-size: 30px;
    text-align: center;
}

#image {
    width: 650px;
    height: 150px;
    background-repeat: no-repeat;
    margin: 40px auto 0px auto;
    background-size: 650px 150px;
}

.wrapper {
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

    <div class="nav">
        <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="#">
                    <li>Home</li>
                </a>
                <a href="#">
                    <li>About</li>
                </a>
                <a href="#">
                    <li>Info</li>
                </a>
                <a href="#">
                    <li>Contact</li>
                </a>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="container-upper">
                <div class="wrapper">
                    <div id="text" class="text">Text</div>
                    <div id="image"></div>
                </div>
            </div>
            <div class="container-lower">
                <div id="option-buttons" class="btn-grid">
                    <button class="btn">Option 1</button>
                    <button class="btn">Option 2</button>
                    <button class="btn">Option 3</button>
                </div>
            </div>
        </div>
    </div>

根据另一个SO thread 的接受答案，margin 和padding 默认不是0 的原因是浏览器具有不同的默认样式表。

Answer 3

您可以将 body padding & margin 设置为 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