페이지의 세로 및 가로 중앙에 배치하려는 기본 콘텐츠 영역이 있습니다.
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
}
]
},
{
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>
body padding & margin을 0으로 설정할 수 있습니다.
body {
z-index: 0;
background-color: black;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0
}
이것은 현재 문제를 해결하지만 다른 div에서 동일한 문제를 다시 얻을 수 있습니다. 일반적으로 모든 패딩과 여백을 0으로 설정하는 것입니다. 이렇게
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
CSS를 디버그하는 방법을 배워야합니다 : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다