为什么按钮在我的侧边栏分层?

Question

我想让我的按钮一个比一个低。然而，它们是层叠的，彼此相邻。如何解决这个问题?我希望按钮在彼此的下面，如果它们太大，不要移动到第二行。

// create buttons function
function myPopFunction(){
mapGeoJSON('POPULATION',5,'YlOrRd','quantiles');}
function myServeFunction(){
mapGeoJSON('SERVICE_CO',5,'BuPu','quantiles');}
function myGovTypeFunction(){
mapGeoJSON('Gov Code',7,'Spectral','equal_interval');}

body,html {
margin:0;
height:100%;
width:100%;
}
body {
display: grid;
grid-template-rows: 60px 225px 1fr ;
grid-template-columns: 300px 1fr 400px;
grid-template-areas: 
"header header header"
"sidebar content dashboard"
"sidebar content dashboard"
"footer footer footer";
}
.sidebar {
color: #444;
grid-area: sidebar;
padding:10px;
background-color: #E0E0E0;
overflow:initial; /* allows the sidebar to overflow with a scrollbar */

}
.sidebar-item {
padding: 10px; /* adds inner padding */
background: rgb(182, 199, 245); /* background color of the card */
border: 1px solid rgb(104, 131, 253); /* border width and color */
margin: 5px; /* outer padding */
cursor: pointer; /* change cursor to hand on hover */

}
/* Dropdown Button */
.dropbtn {
background-color: #005687;
color: white;
padding: 10px;
font-size: 15px;
border: none;
cursor: pointer;
}

<div class="sidebar">
<div class="dropdown">
<a onclick="myPopFunction()" class="dropbtn">Population</a>
<a onclick="myServeFunction()" class="dropbtn">Service Connections</a>
<a onclick="myGovTypeFunction()" class="dropbtn">Governance Type</a>
</div>
</div>

Answer 1

要管理图层，您必须在每个按钮的样式中添加z-index属性。这可能需要为每个div创建多个div。

这是你的更正样式代码(如果它不是代码格式，但它是什么，所以纯文本)

body,html {
margin:0;
height:100%;
width:100%;
}
body {
display: grid;
grid-template-rows: 60px 225px 1fr ;
grid-template-columns: 300px 1fr 400px;
grid-template-areas: 
"header header header"
"sidebar content dashboard"
"sidebar content dashboard"
"footer footer footer";
}
.sidebar {
color: #444;
grid-area: sidebar;
padding:10px;
background-color: #E0E0E0;
overflow:initial; /* allows the sidebar to overflow with a scrollbar */
z-index: 1

}
.sidebar-item {
padding: 10px; /* adds inner padding */
background: rgb(182, 199, 245); /* background color of the card */
border: 1px solid rgb(104, 131, 253); /* border width and color */
margin: 5px; /* outer padding */
cursor: pointer; /* change cursor to hand on hover */
z-index: 2

}
/* Dropdown Button */
.dropbtn {
background-color: #005687;
color: white;
padding: 10px;
font-size: 15px;
border: none;
cursor: pointer;
z-index: 3
}