如何使 Div 元素出现在主体上

Question

基本上，我试图让我的导航栏浮动在页面的主要内容之上，而不创建新块。中间的方框是一张modal/popup，背景是一张地图API（宣传单），都是我要完成的一个项目。

#mapid {
  width: auto;
  height: 100vh;
  z-index: 1;
}

#navbar {
  z-index: 2;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gazetteer</title>

  <!--Bootstrap Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <!--My Stylesheet-->
  <link rel="stylesheet" href="libs\css\styles.css" />

  <!--Leaflet's Stylesheet-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>

<body>
  <!--Preloader-->
  <div id="preloader"></div>

  <div id="navbar">
    <label for="countrySelect">Select a country from the list:</label>
    <select name="countrySelect" id="countrySelect"></select>
  </div>

  <!--Map-->
  <div id="mapid"></div>

  <!--Scripts-->
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <!--My Scripts-->
  <script src="libs\javascript\script.js"></script>
</body>

我已经尝试了 display: fixed、absolute、flex、inline-flex、一系列 margin-left: auto 等。要么我错过了一些东西或者我已经非常困惑了 XD

我已经将它弹出到它自己的 z-index 以不干扰地图功能但是，是的，我能做到的最好的是一个位于主要内容上方但不居中的容器并且不一定会响应我在高度和宽度参数中所做的任何更改。

Answer 1

上下文，我是这个问题的原作者

我创建了一个 div 元素，其 class 为 .mainContainer

.mainContainer {
    position: relative;
}

然后我创建了另一个 div 元素作为主要 div 的子元素，id 为 #nav（因为在这种情况下我需要一个导航栏居中）

#nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    max-width: 400px;
    text-align: center;
    padding: 10px;
    z-index: 5;
    background-color: #AD8350;
    box-shadow: 7px 7px 0px 2px #2A1A1F;
}

margin-left: auto 和 margin-right: auto 是居中元素。

如何使 Div 元素出现在主体上

How to Make Div Element appears over main body

html

css

twitter-bootstrap

leaflet