【发布时间】：2022-01-30 22:08:53
【问题描述】：
因此，当我将鼠标悬停在 London flex 项目上时，下面的其他 flex 项目会下推整个页面。我希望下拉的弹性项目覆盖页面上的内容。
我不想使用列表，因为这似乎更烦人，而且我认为使用 flexbox 会更容易更好。虽然现在我可能不得不重新使用列表。
我似乎找不到解决方案，也不知道如何解决。任何帮助或建议都将不胜感激！ （我对编码也不熟悉）
* {
box-sizing: border-box;
}
body {
font-family: Arial;
}
.container {
width: 100%;
border: 1px solid gray;
height: 100%;
min-height: calc(100vh - 67px);
background-color: rgb(228, 228, 228);
}
header {
padding: 1em;
color: white;
background-color: black;
text-align: center;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
padding: 1em;
padding-bottom: 0em;
padding-top: 1.5em;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
background-color: #333;
border-radius: 5px;
margin: 20px;
margin-top: 10px;
margin-bottom: 10px;
transition: 0.2s;
}
.navbar a:hover {
background-color: whitesmoke;
color: black;
transform: scale(1.15);
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction:column;
}
.active-dropdown > .dropdown-sub{
display: none;
z-index: 1;
flex-direction: column; /* or row */
}
.active-dropdown:hover > .dropdown-sub {
display: flex;
}
.active-dropdown:hover > .dropdown-sub > .dropdown-option:hover{
background-color: #abcdef;
}
.active-dropdown a{
display: block;
background-color: #04AA6D !important;
color: white;
padding: 14px 20px;
text-decoration: none;
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
border-radius: 5px;
margin: 20px;
margin-top: 10px;
margin-bottom: 10px;
transition: 0.2s;
}
.active-dropdown a:hover {
color: white;
transform: scale(1.15);
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
}
.londontxt {
flex: 20%;
padding: 10px;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}<!DOCTYPE html>
<html>
<head>
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title"><a href="london.html">London</a></div>
<div class="dropdown-sub">
<div class="dropdown-option">option 1</div>
<div class="dropdown-option">option 2</div>
<div class="dropdown-option">option 3</div>
</div>
</div>
<a style="align-self: flex-start" href="#">Paris</a>
<a style="align-self: flex-start" href="#">Tokyo</a>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Bild 1</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Bild 2</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html【问题讨论】：