以下是我要实现的目标的总结:
我有一个背景色为棕褐色的包装 div。
包装器 div 有 2 个子级。侧边栏 div 和内容 div。这两个子项都包含链接。
侧边栏 div 需要灰色背景色。
我创建了一个 sidebar:before 伪元素,其 z-index 为 -1
。这个伪元素消失了。当我将 z-index 更改为 0
时,这个元素被放置在侧边栏 div 的顶部,我的侧边栏信息被隐藏了。
我添加了一些示例代码,例如 these :
<div class="wrap">
<div class="sidebar">
<p><a href="www.google.com">sidebar</a></p>
<p><a href="www.google.com">sidebar</a></p>
<p><a href="www.google.com">sidebar</a></p>
<p><a href="www.google.com">sidebar</a></p>
<p><a href="www.google.com">sidebar</a></p>
<p><a href="www.google.com">sidebar</a></p>
<p><a href="www.google.com">sidebar</a></p>
<p><a href="www.google.com">sidebar</a></p>
<p><a href="www.google.com">sidebar</a></p>
<p><a href="www.google.com">sidebar</a></p>
</div>
<div class="content">
<p><a href="www.google.com">content</a></p>
<p><a href="www.google.com">content</a></p>
<p><a href="www.google.com">content</a></p>
<p><a href="www.google.com">content</a></p>
<p><a href="www.google.com">content</a></p>
<p><a href="www.google.com">content</a></p>
<p><a href="www.google.com">content</a></p>
<p><a href="www.google.com">content</a></p>
<p><a href="www.google.com">content</a></p>
<p><a href="www.google.com">content</a></p>
</div>
</div>
.wrap {
position:relative;
background-color:tan;
}
.sidebar, .sidebar:before {
width:25%;
}
.sidebar {
float:left;
color: #ebeef3;
font-size: 90%;
}
.sidebar:before {
content: '';
position:absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 0;
background-color: #5f6673;
}
此代码基于 great tutorial显示在具有相同高度的列上。
最佳答案
大多数开发人员只需照原样按照 TutsPlus 教程进行操作,它就会起作用。 (问题中提供了链接。)但是在 Drupal 网站上,.l-content div 元素的位置属性有时设置为 relative,有时保留为默认值。所以我们不能使用教程使用的 .content 伪元素。所以我稍微改变了 css 如下:
.wrap:before {
width:75%;
}
.wrap {
position:relative;
}
.wrap:before {
content: '';
position:absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 25%;
background-color:tan;
}
.sidebar, .sidebar:before {
width:25%;
}
.sidebar {
float:left;
color: #ebeef3;
font-size: 90%;
}
.sidebar:before {
content: '';
position:absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 0;
background-color: #5f6673;
}
我添加了一些示例代码 here .
我正在使用 Drupal 7/Omega 4/SASS/Compass/Ruby。
关于CSS:如何使用 z-index 控制侧边栏背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24762042/