相关疑难解决方法(0)
无法让ng2-bootstrap模式显示在bs-modal-backdrop之上
我使用ng2-bootstrap的模态有一个问题.我正在做这里提到的整个viewContainerRef hack .我正在深层嵌套组件中创建一个模态(通过路由深入4级).我从上面的链接中复制了模态代码.每当我尝试打开它时,它会像这样打开:bs-modal-backdrop完全覆盖屏幕,包括模态,阻止我与它交互.知道为什么会这样吗？
5
推荐指数
推荐指数
1
解决办法
解决办法
1415
查看次数
查看次数
使用 CSS 在 div 后面制作按钮
我有一些 html，其中包含一些包装在 div 类中的按钮。
.addshade {
left: 0;
width: 100%;
height: 100%;
z-index: 100000;
background: rgba(0, 0, 0, 0.75);
display: block;
}
.cbutton {
cursor: pointer;
display: inline-block;
font-family: Roboto;
font-weight: 700;
font-size: 16px;
border-radius: 5px;
padding: 5px 6px;
min-width: 90px;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: -1000;
}<div class="addshade">
<p class="description"></p>
<div class="options">
<a class="buy cbutton whiteonpurple" target="_blank" href="http://www.apple.com/shop/buy-watch/apple-watch">Buy</a>
<a class="hint cbutton whiteonblack" target="_blank">Hint</a>
</div>
<div class="info" style="display: none;">
<div class="bar"></div>
<div class="rehints" …4
推荐指数
推荐指数
1
解决办法
解决办法
1566
查看次数
查看次数
使用z-index显示其他元素后面的元素不起作用
我创造了这个小提琴来说明我的问题:http://jsfiddle.net/AVxbd/
我有一个menu(#container),带有一些链接(#text1,#text2).我做了一个#highlighter元素来突出显示该人在特定时刻的页面链接.HTML:
<div id="container">
<div id="highlighter"></div>
<div id="text1">Text 1</div><div id="text2">Text 2</div>
</div>
JavaScript:
$('#highlighter')
.offset($('#text1').offset())
.width($('#text1').width()
);
$('#text1, #text2').click(function(){
$('#highlighter').animate({
top: $(this).offset().top,
left: $(this).offset().left,
width: $(this).width() + "px"
},300);
});
的问题是,在#highlighter元素被显示在所述#text1和#text2元素.那不是我想要的!
我试图用z-index解决这个问题:
#container { z-index: 1; }
#highlighter { z-index: 2; }
#text1, #text2 { z-index: 3; }
但是,这不起作用,正如你可以在小提琴中看到的那样.
我怎样才能让它发挥作用？我想让它看起来像#text1和#text2元素有一个橙色背景,但因为我希望荧光笔在宽度和位置动画,我不能只给这些元素一个背景本身.
3
推荐指数
推荐指数
1
解决办法
解决办法
608
查看次数
查看次数
使用z-index重叠带有图像的div
CSS动画在图像后面不断播放.未加载图像时,它将显示,但加载后图像将与动画重叠.我正在使用z-index来实现这一点,但它无法正常工作.
图像应隐藏使用z-index属性加载动画.
注意:我无法使用任何javascript解决方案来隐藏加载动画并在图像加载后显示它.
CSS/HTML/Demo
.leftprev {
overflow:auto;
position:absolute;
height:99%;
width:85%;
}
.loadingslide {
z-index: 50; /* Loading div's z-index */
}
.spinner.big {
display: block;
height: 40px;
}
.spinner {
bottom: 0;
display: none;
font-size: 10px;
height: 30px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
}
.spinner.big > div {
width: 6px;
}
.spinner > div {
animation: 1.2s ease-in-out 0s normal none infinite stretchdelay;
background-color: #333;
display: inline-block;
height: 100%;
width: …2
推荐指数
推荐指数
1
解决办法
解决办法
8080
查看次数
查看次数
用js改变z-index
我对z-indexjs 的变化有一个问题:我有一堆卡片
.card
{
background: rgb(70, 70, 70);
width: 300px;
padding-bottom: 10px;
float: left;
margin: 100px 5px 0 5px;
opacity: 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
transition: 1s;
z-index: -1 !important;
}
我用js更改了一些属性:
window.onload = function()
{
var cards = document.querySelectorAll(".card");
for (let i = 0; i < cards.length; i++)
{
cards[i].style.margin = "0 5px 0 5px";
cards[i].style.opacity = "1";
}
for (let i = 0; i < cards.length; i++)
{
cards[i].style.transition = ".4s"; …2
推荐指数
推荐指数
1
解决办法
解决办法
947
查看次数
查看次数
透明彩色覆盖在背景图像
我正在尝试创建一个背景图像,然后在它上面创建一个透明的颜色.但是,我遇到的问题是整个网站获得透明代码.我想知道为什么以下不起作用:
小提琴:http://jsfiddle.net/bzvrwqhu/2/
html {
background: url('https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?cs=srgb&dl=food-dinner-lunch-70497.jpg&fm=jpg') no-repeat center center fixed;
backgorund-size: cover;
color: #FFF;
}
.content {
z-index: 2;
}
.curtain {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(11, 150, 113, 0.5);
z-index: 1;
}<div class="curtain"></div>
<div class="content">
My Content
</div>如果你看小提琴,你会发现文本上面也有渐变.我不明白为什么会这样.2个元素在同一级别上,我已将z-index 2应用于包含内容的元素.那么它不应该在不受颜色影响的情况下坐在上面吗？
0
推荐指数
推荐指数
1
解决办法
解决办法
77
查看次数
查看次数
我应该使用z-index属性还是其他方法？
我的问题是我想在图像类上放置绿色滤镜。我使用了z-index属性，但工作原理并不相同。过滤器不显示upp。我应该使用z-index属性还是其他方法？
这是我的主要代码：
header {
height: 300px;
width: 100%;
position: relative;
z-index: 0
}
.black-filter { /*Not working for some reason*/
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 8;
background-color: #66fb04a8
}
.image {
width: 100%;
position: absolute
; top: 0;
left: 0;
z-index: 5;
height: 100%;
width: 100%;
background-image: url('https://images.pexels.com/photos/209137/pexels-photo-209137.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
background-size: cover;
filter: blur(2px)
}
nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
background:
hsla(0, 0%, 100%, 0);
overflow: hidden;
}<header …-3
推荐指数
推荐指数
1
解决办法
解决办法
162
查看次数
查看次数