使容器不可见但不满足
使容器不可见但不满足
提问于 2022-01-27 11:14:28
我有一张地图，在地图上我有放大和缩小功能，我的问题是如何使红色部分不可见而不是按钮，所以当用户搜索地图上的位置时，这个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);
现在看起来是这样的：
回答 4
Stack Overflow用户
发布于 2022-01-27 11:20:49
用途：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>
Stack Overflow用户
发布于 2022-07-07 21:47:11
对我来说，设置能见度才是诀窍！
outer.style.visibility = 'hidden';
inner.style.visibility = 'visible';Stack Overflow用户
发布于 2022-01-27 11:50:14
你试过从CSS中删除“背景:红色”吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70884437
复制相关文章
点击加载更多
相似问题
使按钮较少可见，但不会消失
如何使表布局满足100%的容器
如果满足条件，则C#使属性可见。
试图使flex容器行，但不工作
如何使容器在滚动时始终可见
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
