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 ，以获取添加了属性的网页的实际示例：

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 线程margin上接受的答案，默认情况下和默认情况下的原因padding是0因为浏览器具有不同的默认样式表。

Answer 3

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

body {

    z-index: 0;

    background-color: black;

    width: 100vw;

    height: 100vh;

    padding: 0px;

    margin: 0px;

}

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