gpt4 book ai didi

javascript - 在浏览器中打开时如何将内容放在固定标题或导航下?

转载 作者:行者123 更新时间:2023-11-28 03:09:14 28 4
gpt4 key购买 nike

您好,当我使用 html 和 css 制作标题时遇到问题。我的标题位于固定位置,但内容掩盖了我的标题。当我运行它时,我希望我的内容位置位于标题下。另外,我将标题宽度设置为 100%,但它向右移动,这样它就不会覆盖屏幕上的整个宽度。[已更新]

enter image description here

<style>
@media(min-width: 468px) {
body{
background-color: aqua;
}
.container-1{
display: flex;
/*
align-items: flex-start; -->box 1 lebih sempit ke atas
align-items: flex-end; -->box 1 lebih sempit ke bawah
align-items: center; -->box 1 lebih sempit ke tengah (atas bawah)
flex-direction: column; -->flex box menjadi kolom
*/
}
.container-2{
display: flex;
/*
justify-content: flex-end;
justify-content: flex-start;
*/
justify-content: space-between; /*ada spasi diantara kotak*/
}
}
.container-3{
display: flex;
flex-wrap: wrap;
}

.container-1 div, .container-2 div, .container-3 div{
border:1px #000000 solid;
padding:10px;
}

.box-1{
flex:2;
order:2;

}
.box-2{
flex:1;
order:1;
}
.box-3{
flex: 1;
order:3;
}

.container-2-box{
flex-basis:20%;
}

.container-3-box{
flex-basis: 10%;

}
header{
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
margin:0;

}
.whole-container{
margin-top:2.0rem;

}
</style>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Flexbox</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>

</head>

<body>
<header>
<h1> Flexbox</h1>
</header>
<div class="whole-container">
<div class="container-1">
<div class="box-1">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-2">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-3">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

<div class="container-2">
<div class="container-2-box">
<h3>Box 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-3">
<div class="container-3-box">
<h3>Box 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">

<h3>Box 9</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 10</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 11</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 12</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>

最佳答案

没有看到您的 HTML 代码,这有点猜测,但我会尝试一下。

向元素添加 position:fixed 将使其在其他内容之上流动。该元素被从文档流中取出。所以重叠是自然行为。

为了防止内容被隐藏,您应该向框的父级添加填充。我猜当您添加以下代码时,它可以解决问题

body {
padding-top: 3rem; /* should be at least the height of the header*/
}

关于标题位置的第二个问题可以通过以下代码修复:

/* option 1, add a left position:*/
header {
...
left: 0;
}

/* option 2, remove the width, use left and right position instead: */
header {
...
/* width: 100%; remove this line */
left: 0;
right: 0;
}

关于javascript - 在浏览器中打开时如何将内容放在固定标题或导航下?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60303562/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com