0
270
Viewsmake 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:
·
Juan Pablo Isaza
3 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
Have you tried removing the ‘background: red’ from your CSS?
·
Juan Pablo Isaza
Report
Answer question