0

Essentially, I've trying to get my navbar to float above the main content of the page without creating a new block. The box in the centre is a modal/popup, and the background is a map API (Leaflet) and it's all for a project I need to complete.

What I'm trying to achieve.

#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>

I've tried display: fixed, absolute, flex, inline-flex, a series of margin-left: auto, etc. Either I've missed something or I've gotten horribly confused XD

I've popped it onto its own z-index to not disturb the map functions but yeah, the best I've been able to achieve is a container that sits above the main content but isn't centred and won't necessarily respond to any changes I make in the height and widths arguments.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Ranisimo
  • 35
  • 13
  • 2
    Welcome to Stack Overflow! We need to see more code. The HTML that you posted is not enough to help you, and we also need the CSS - not just a listing of what you tried. Please read [how to create a minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – disinfor Aug 11 '21 at 14:52
  • Similar question here: [https://stackoverflow.com/questions/68185120/make-select-option-display-on-top-of-leaflet-map/68245949#68245949](Make Select Option Display on top of Leaflet Map) – Seth Lutske Aug 11 '21 at 16:34

1 Answers1

0

For context, I am the original author of this question.

I created a div element with a class of .mainContainer

.mainContainer {
    position: relative;
}

Then I created another div element as a child of the main div with an id of #nav (as in this case I needed a navbar to be centred)

#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 and margin-right: auto are what centred the element.

Ranisimo
  • 35
  • 13