标签: z-index

WPF:Canvas Z-Index Bug

所以我在WPF中制作了自己的轮播控件.我偶然发现了一个错误,并想知道是否有人知道如何解决这个问题,如方法调用或一系列方法调用或一些解决方法.这是我的旋转木马的打印屏幕:

Carousel Image http://img4.imageshack.us/img4/9599/carousele.jpg

正如你可以清楚地看到这个图像,我的鼠标指针超过按钮上写有16.但是上面写着18的按钮是一个蓝色的按钮,好像我的鼠标在那个按钮上.我还将工具提示设置为绑定到内容,工具提示说我的鼠标位于按钮上,其中包含18个.这应该是CORRECT行为,因为18是按钮z-index值.因此,上面有18的按钮应该是按钮的ON TOP,上面有16.但是,WPF没有以这种方式渲染画布,我想知道如何克服这个问题.我试过canvas.InvalidateArranage(),canvas.invalidateVisual(),canvas.UpdateLayout(),但我没有运气.画布的左侧显示它应该是什么样子,但即使z-index值正确,右侧也无法产生相同的结果,甚至这个截图证明了我的观点,这是WPF中的一个错误.

c# wpf canvas z-index

2
推荐指数
1
解决办法
3995
查看次数

为什么这个div继承了父母的不透明度?

通常我会尝试在这里很好地记录这个问题,并复制一些代码,这样当我链接到的URL以证明问题不再导致任何地方时,至少问题将有足够的代码在其中,以便有人阅读很久以后可能会遇到同样问题的人可以看到这个例子.但在这种情况下,我遇到的问题是如此具体......我不知道什么是错的,所以我不知道在这里复制什么代码.

我有一个div,不透明度设置为1,在另一个div中,不透明度设置为.5,以制作一个非常便宜的"灯箱"效果.至少在其他两个网站上,我完全按照完全相同的方式完成了这个问题,并且从未遇到过这个问题.事实上,如果我在Dreamweaver中打开一个新的HTML页面并尝试复制该问题,我就不能.我知道我必须忽略一些如此荒谬的简单,但......

有问题的网址是http://pmind.com/staging/123/dashboard.shtml

中间的白色框generate_window继承其父级(generate_window-wash)不透明度.

为什么?

css z-index opacity

2
推荐指数
1
解决办法
1719
查看次数

用jQuery操纵图像z-index

我有一排160x160px浮动图像被浏览器调整为100x100px.

在悬停时,操纵它们通常的大小和边距的图像被操纵以使它们保持在相同的位置.

我接下来想要实现的是将放大的图像移动到前面,然后在悬停事件后再移回.我试图通过添加和删除z-index为100的类来实现此目的.

HTML是:

    <div id="content_top">
        <img class="thumbnail" src="images/thumbs/thumb1.jpg" width="100"  height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb2.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb3.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb4.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb5.jpg" width="100" height="100" border="0" alt=""/>
    </div>
Run Code Online (Sandbox Code Playgroud)

使用CSS:

#content_top {
      height: 210px;
}

#content_top img{
      float:left;
      padding: 0 0 0 10px;
    }

    .ontop {
      z-index: 100;
    }
Run Code Online (Sandbox Code Playgroud)

我正在使用的jQuery是:

$('#content_top img').hover(function(){
    $(this).filter(':not(:animated)').animate({
        'width' : '160px',
        'height' : '160px',
        'marginLeft' : '-30px',
        'marginRight' : '-30px',
        'marginBottom' : …
Run Code Online (Sandbox Code Playgroud)

css jquery z-index

2
推荐指数
1
解决办法
3061
查看次数

当用户将鼠标悬停在div上时,如何更改div的z-index?

我目前正在尝试创建松散堆叠的宝丽来照片形式的按钮,我想得到用户将鼠标悬挂在堆顶上的偏光片.

我试图用一个简单的方法实现这个目的:

#polaroid a hover{
z-index:15;
}
Run Code Online (Sandbox Code Playgroud)

我认为这理论上可以将宝丽来带到堆顶,因为目前"最高"的宝丽来是z指数:13;

但是,这根本不起作用,我想我做错了,可能需要一些javascript来实现这一点.

我目前的代码是......

HTML

<a id="polaroid_home" href="index.html"></a>
<a id="polaroid_about" href="index.html"></a>
<a id="polaroid_portfolio" href="index.html"></a>
<a id="polaroid_contact" href="index.html"></a>
Run Code Online (Sandbox Code Playgroud)

我已将所有这些设置为链接到index.html以进行测试.

CSS

#polaroid_home{
position:absolute;
width:175px;
height:215px;
left:670px;
top:140px;
background-image:url(../Images/polaroid-home.png);
background-repeat:no-repeat;
z-index:13;
}


#polaroid_home a:hover{
z-index:15;

}

#polaroid_about{
position:absolute;
width:175px;
height:215px;
left:765px;
top:175px;
background-image:url(../Images/polaroid-about.png);
background-repeat:no-repeat;
z-index:12;
}

#polaroid_about a:hover{
z-index:15;

}

#polaroid_portfolio{
position:absolute;
width:175px;
height:215px;
left:620px;
top:255px;
background-image:url(../Images/polaroid-portfolio.png);
background-repeat:no-repeat;
z-index:10;
}

#polaroid_portfolio a:hover{
z-index:15;

}

#polaroid_contact{
position:absolute;
width:210px;
height:235px;
left:740px;
top:310px;
background-image:url(../Images/polaroid-contact.png);
background-repeat:no-repeat;
z-index:11;
}

#polaroid_contact a:hover{
z-index:15; …
Run Code Online (Sandbox Code Playgroud)

css z-index mouseover

2
推荐指数
1
解决办法
1万
查看次数

z-index和HTML中的onclick

我有以下HTML代码:

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<div id="A" style="width:100px; height: 100px; background: #00FF00; padding: 15px; 
     z-index: 50; opacity: .5" onclick="javascript:alert('A')">
    <div id="B" style="width:50px; height: 50px; background: #FF0000; z-index:10;"  
      onclick="javascript:alert('B')" >
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我希望这样做可以让点击div B的位置不会调用它的onclick,但只有A,因为A是一个更高的z-index.

如果没有z-index,我该如何实现呢?

html javascript z-index

2
推荐指数
1
解决办法
1万
查看次数

位置绝对值与IE的z-index

有人可以帮我解决这个问题吗?问题仅出在兼容模式下的IE中.我有位置绝对和z-index 99999999的菜单,但仍然隐藏菜单内容.请检查 :

http://www.tomasdostal.com/projects/modul16/draft2/?page=buildings

谢谢你的建议

css internet-explorer positioning z-index internet-explorer-7

2
推荐指数
1
解决办法
5277
查看次数

HTML/CSS - 在img标签上显示文本

我试图左右显示两个图像,包括文本,控件以及我心中想要的任何其他图像.为此,我有以下内容:

<div>
    <div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is text</div>
        <div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is also text</div>
        <img id="leftImg" alt="Images/redbox.png"
            style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;" 
            src="Images/redbox.png" />

    </div>
    <div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent">
        <img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

除了一件小事之外,这一切都很棒......左边的div,"redbox.png"总是被我想要的s(或者元素所占据的任何位置)的数量减少.我可以将元素放在图像之后,但是将它们放在我想要的方式更容易,并且在我为框架设置动画时将它们保持在原位.

现在,为什么我使用图像而不是background-img?好吧,我希望图像<div>自动调整到周围的s,这是我发现轻松做到这一点的唯一方法(使用javascript手动调整大小是一个选项,但是复杂的一个,因为这些框将被设置为动画).

有任何想法吗?谢谢!

html javascript css tags z-index

2
推荐指数
1
解决办法
7999
查看次数

Z-index不用img和div工作

我将定位元素放在彼此的顶部时遇到了问题.这是我的标记:

<div id="glownySlajder">

                <ul>
                    <li>
                        <img src="inc/img/slajder_bg.jpg" alt="Slajd" class="slajd">
                        <div class="fr">
                            <a href="#" class="przyciskPoprzednia fl" title="Poprzednia"><img src="inc/img/strzalka_lewo.png" alt="strzalka_lewo"></a>
                            <p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet consequat gravida. Nunc sed risus est, ac vestibulum nisl. Suspendisse sagittis velit a massa auctor accumsan. Aliquam hendrerit libero tellus, at molestie leo. Curabitur sodales </p>
                            <a href="#" class="przyciskNastepna fr" title="Nast?pna"><img src="inc/img/strzalka_prawo.png" alt="strzalka_prawo"></a>
                        </div>

                    </li>
                 </ul>
         </div>
Run Code Online (Sandbox Code Playgroud)

这是我的css:

#glownySlajder {
    margin-bottom: -2px;
}

#glownySlajder a {
    margin: 7px;
}

#glownySlajder ul …
Run Code Online (Sandbox Code Playgroud)

html css z-index

2
推荐指数
1
解决办法
1万
查看次数

jQuery - css在更高的Z-index上禁用div

我的问题: 是否有可能禁用div(Z-index 2),因此它仍然可见并使鼠标"无法察觉",因此我可以通过它(鼠标悬停,点击)实现鼠标操作到它下面的启用div?这意味着您可以单击下面的div,因为您的鼠标位于禁用的div顶部或鼠标悬停在顶部的div上,它将无关紧要或影响由它下面的div调用的鼠标悬停操作.

问题: 我在网上和stackoverflow上搜索过,无法找到我想要的简单答案.我有几个div和一些在不同的Z-index上相互重叠,而顶部的那些正在弄乱下面的那些动作.

示例: - 我在下部div(Z-Index 1)中有一个包含鼠标悬停操作的漂亮图形框.当鼠标悬停在盒子上时,它会触发操作. - - 我在新图层(Z-Index 2)上的div上的框上也有一些漂亮的图形文本,但这会干扰下面框中的鼠标悬停操作.这看起来好像我的鼠标离开了盒子,但它并没有只是在更高级别的div上.

问题摘要: 我可以禁用div,因此它不可点击或触发鼠标悬停调用,但仍然可见吗?

html jquery z-index mouseover clickable

2
推荐指数
1
解决办法
3266
查看次数

如何用css在按钮中显示文本

我有以下代码:

的jsfiddle

http://jsfiddle.net/9b3YG/

HTML

<a class="button" href="">
        <span class="fill_link"></span>
        Test
    </a>
Run Code Online (Sandbox Code Playgroud)

我希望链接的文本位于span"fill_link"的前面,但我只能更改类"button"和类"fill_link"的css.

谢谢

css z-index

2
推荐指数
1
解决办法
182
查看次数