如何使侧边栏与标题重叠？
[英]How to make sidebar overlap the header?
问题描述
我尝试使用z-index使边栏与标题重叠，但是无法这样做。
header { width: 100%; height: 50px; background-color: blue; z-index: 0; } aside { height: 100vh; width: 300px; background-color: green; z-index: 200; }
<body> <header></header> <aside></aside> </body>
3 个解决方案
解决方案1
3 已采纳 2016-12-18 21:24:12
定义position: absolute .aside position: absolute
header { width: 100%; height: 50px; background-color: blue; } aside { height: 100vh; width: 300px; position: absolute; top: 0; background-color: green; }
<body> <header></header> <aside></aside> </body>
解决方案2
1 2016-12-18 21:22:44
这类似于先前的问题。 您是否尝试在边栏上使用负边距来改善重叠？
尝试这个：
header {
width: 100%;
height: 50px;
background-color: blue;
z-index: 0;
}
aside {
height: 100vh;
width: 300px;
background-color: green;
margin: -50px;
z-index: 200;
}
解决方案3
0 2016-12-18 21:25:34
您可以添加position: absolute
aside {
height: 100vh;
width: 300px;
position: absolute;
background-color: green;
z-index: 200;
}
如何使浮动侧边栏在页脚之前停止浮动而不与其重叠
[英]How to make floating sidebar stop floating before the footer to not overlap with it
如何使文本不与响应式标题（flexbox）中的外部容器重叠？
[英]How to make text to not overlap outer containers in responsive header(flexbox)?
如何使我的聊天容器的标题对于其中的每个元素都可滚动且不重叠
[英]How to make header of my chat container be scrollable for every element in it and not overlap
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.