我正在尝试覆盖一个可以在flexBox容器中浮动的div.
标头是一个flexBox容器,有三个flexBox div在容器中工作.覆盖我想覆盖其他三个div但仍然受限于.header flexBox容器div.
我已经在stackoverflow和其他地方尝试了多种方法,但是当结合使用flexBox时,怎么没有看到解决覆盖或分层的解决方案.
谢谢你的任何建议!
HTML:
<div class="header"> <div class="headerLeft">Left</div> <div class="headerMiddle">Middle</div> <div class="headerRight">Right</div> <div class="overlay">Overlay</div> </div>
CSS:
.header { border: 3px solid orange; width: 100%; display: -webkit-flex; display: flex; z-index: 0; } .headerLeft { border: 2px solid chartreuse; -webkit-flex: 1; flex: 1; z-index: 1; } .headerMiddle { border: 2px solid darkorchid; -webkit-flex: 1; flex: 1; z-index: 1; } .headerRight { border: 2px solid darkorange; -webkit-flex: 1; flex: 1; z-index: 1; } .overlay { border: 2px solid green; z-index: 10; background: rgba(0,0.3); }
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。