我有一張地圖，在地圖上我有放大和縮小功能，我的問題是如何使紅色部分不可見而不是按鈕，所以當用戶在地圖上搜索位置時，這個 div 不應該阻擋視圖，只有這些按鈕應該是可見的。
英語不是我的母語，所以可能是錯誤的。
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);目前看起來像這樣：
uj5u.com熱心網友回復：
利用：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>uj5u.com熱心網友回復：
您是否嘗試過從 CSS 中洗掉“背景：紅色”？
uj5u.com熱心網友回復：
玩弄她的位置就能解決問題。
position: absolute;
訪問
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422186.html
標籤：