所以我有一个背景图像，并且希望屏幕顶部的 Navbar 覆盖该图像，而 frontInfo div 位于屏幕中间。但我不知道如何将一个放在中间，一个放在顶部。我了解基础知识，但我才刚刚开始学习 html 和 css。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>FlexBox test</title>
</head>
<body>
<header id="showcase">
<div class="navBar">
<h1>NavBar</h1>
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
</div>
<div class="frontInfo">
<h1>Learning FlexBox</h1>
<p>Learn now</p>
<a href="#" type="button">Read more</a>
</div>
</header>
</body>
</html>
*{
padding: 0;
margin: 0;
}
body {
font-family: Arial,sans-serif,"Helvetica Neue";
}
header {
background-image: url("../img/bg-Image.jpg");
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#showcase {
display: flex;
}
#showcase .navBar {
flex-direction: row;
align-items: flex-start;
}
#showcase .frontInfo {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
最佳答案
在使用 flex 属性之前，您必须在类中应用 flex 值。就像您对展示 ID 所做的那样，在应用 flex 属性之前，您必须在每个容器中重复显示 flex 。 这里有一个有趣的游戏:https://flexboxfroggy.com/#fr ^^
对于固定元素，查找“position”属性及其值“relative”、“fixed”、“absolute”。
关于html - CSS FlexBox - 在不同位置的一个容器中定位 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58581765/