相关疑难解决方法(0)
仅使用CSS,将鼠标悬停在<a>上
当有人在一个<a>元素上盘旋时,我想展示一个div ,但我想在CSS而不是JavaScript中这样做.你知道怎么做到这一点吗？
推荐指数
解决办法
查看次数
是否可以将伪元素的堆叠顺序设置在其父元素下面？
我试图用:after伪元素CSS选择器设置元素的样式
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
看起来::after元素不能低于元素本身.
有没有办法让伪元素低于元素本身？
推荐指数
解决办法
查看次数
为什么具有z-index值的元素不能覆盖其子级？
今天，经过四个小时的调试，我很难学到了这个规则：
如果父级的z-index值为任何值，则无论您如何更改子级的CSS，父级元素都永远无法覆盖（堆叠在其子级元素之上）
我如何通过逻辑理解这种行为？规范在哪里覆盖？
代码（也在CodePen中）：
.container {
width: 600px;
height: 600px;
background-color: salmon;
position: relative;
z-index: 99;
margin-top: 20px;
padding-top: 10px;
}
h1 {
background-color: pink;
position: relative;
z-index: -1;
font-family: monospace;
}<div class="container">
<h1>1. I can never be covered by parent if my z-index is positive.</h1>
<h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>
推荐指数
解决办法
查看次数
为什么z-index不起作用？
我试图了解z-index的工作原理.为了做到这一点,我创建了一个由五个div组成的简单示例.每个人都是前一个孩子,除了第一个孩子.我的目标是使第一个div(所有其他div的父容器)显示在所有其他div之上,有效地隐藏它们.
为了实现我的目标,我已经在所有div和父div上放置了z-index属性我放了一个夸大的值100以确保它高于所有其他但它似乎没有工作.
我已经阅读了许多关于z-index的不同文档,并在Stack Overflow上阅读了大量的答案.到目前为止,我尝试了以下内容:
- 将位置属性添加到所有div.
- 向我要隐藏的div添加值为0.99的不透明度.
- 应用位置属性的不同值组合(例如,相对,固定,绝对).
尽管如此,我还没有成功地使父div出现在所有其他div之上.我究竟做错了什么？
我用我刚才描述的例子创建了一个JSFiddle:https://jsfiddle.net/y8jfdz7w/15/ .
.first {
position: absolute;
z-index: 100;
width: 500px;
height: 500px;
background-color: grey;
}
.second {
position: absolute;
z-index: 2;
width: 450px;
height: 450px;
top: 25px;
left: 25px;
background-color: orange;
opacity: 0.99;
}
.third {
position: absolute;
z-index: 3;
width: 400px;
height: 400px;
top: 25px;
left: 25px;
background-color: yellow;
opacity: 0.99;
}
.fourth {
position: absolute;
z-index: 20;
width: 350px;
height: 350px;
top: 25px;
left: 25px;
background-color: green;
opacity: …推荐指数
解决办法
查看次数
CSS：在子背景图像上显示父背景图像
在我的示例http://jsfiddle.net/cXbMb/中，我需要完全显示徽标图像，即标题图像必须部分透支。还有下一个要求：标题图像必须在标题下方 5 像素处开始。
<!DOCTYPE html>
<html><head></head>
<body>
<header>
<h1>Headline</h1>
<div></div>
</header>
</body>
</html>
body { padding: 0; margin: 0 auto; width: 400px; }
header {
background-image: url('http://placehold.it/100x50/ffff00&text=LOGO');
background-position: left top;
background-repeat: no-repeat;
}
header h1 { text-align: right; margin: 0 0 5px; padding: 0; font-size: 1em; }
header div {
background-image: url('http://placehold.it/400x100/0000ff&text=HEADER');
background-position: left top;
background-repeat: no-repeat;
height:200px;
}
推荐指数
解决办法
查看次数
有没有办法使用css将子元素放在其父元素后面？
我想知道是否有办法使用css将子元素放在其父元素后面.我现在z-index不是一个选项,因为子元素继承了父元素的z-index.但我想知道是否有一个黑客或任何我可以用来完成这件事.或者,如果有一个javascript黑客或任何东西.
原谅糟糕的英语.
推荐指数
解决办法
查看次数
如何将父母div带到前面？
如何将父母div带到前面？
我的HTML: -
<div class="main">
<div class="parent">
<div class="child"></div>
</div>
</div>
我的css: -
.main{
width : 400px;
height: 400px;
background : green;
z-index: 10;
}
.parent{
width: 100px;
height: 100px;
position: relative;
background: yellow;
z-index: 5;
}
.child{
width : 200px;
height: 200px;
background: red;
z-index : -1;
}
推荐指数
解决办法
查看次数