'make container invisible but not content

I have a map and on the map i have zoom in and zoom out functionality, my question is how to make the red part invisible but not buttons, so when user searchs location on the map, this div should not block the view, only thos button should be visible.

english is not my mother language so could be mistakes.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import styled from "styled-components";

const Toolbox = styled.div`
  display: flex;
  justify-content: end;
  width: 100%;
  max-width: calc(100vw - 60px);
  margin-bottom: 10px;
  background-color:red
  button {
    margin-left: 10px;
    width: 2em;
    height:2em
  }
`;
function App() {
  return (
   
          <Toolbox>
            <button onClick={''}>+</button>
            <button onClick={''}>-</button>
            <button onClick={''}>x</button>
          </Toolbox>
       
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

it looks like this at the moment:

enter image description here

javascriptcssreactjsmaterial-uistyled-components


Solution 1:[1]

Use: position: absolute;

.Map {
  position: relative;
  background: #eee;
  min-height: 150px;
}

.Toolbox {
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  padding: 10px;
}
<div class="Map">

  Here goes the map

  <div class="Toolbox">
    <button type="button">+</button>
    <button type="button">-</button>
  </div>

</div>

Solution 2:[2]

Have you tried removing the ‘background: red’ from your CSS?

Solution 3:[3]

Playing with her position will solve the problem.

position: absolute;

visit

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Erick Jones
Solution 3 Berkant

Related Questions