make container invisible but not content-CodePudding

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:

CodePudding user response：

Use: position: absolute;

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

.Toolbox {
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  padding: 10px;
}

<div >

  Here goes the map

  <div >
    <button type="button"> </button>
    <button type="button">-</button>
  </div>

</div>

CodePudding user response：

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

CodePudding user response：

Playing with her position will solve the problem.

position: absolute;

visit