标签: z-index
Z-INDEX的最小值和最大值
我的HTML页面中有一个DIV.我根据某些条件展示了这个DIV.但DIV显示在我指向鼠标光标的任何HTML元素后面.
我已经尝试了从0到999999的Z-INDEX属性的所有值.
任何人都可以告诉我为什么会发生这种情况？
CSS的Z-INDEX属性是否有任何最小值或最大值？
例如,以下HTML在ascx控件中定义:
.divClass {
position: absolute;
left: 25px;
top: 25px;
width: 320px;
height: 300px;
z-index: 1000;
}CSS是:
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<asp:HyperLink ID="lnkProgram" runat="server"></asp:HyperLink>
</td>
</tr>
<tr>
<td>
<div class="divClass">
Some Data
</div>
</td>
</tr>
</table>我正在使用主页上的+ Jquery显示和隐藏特定的DIV for Hyperlink.
推荐指数
解决办法
查看次数
z-index不适用于固定定位
我有一个div默认定位(即position:static)和一个div有fixed位置.
如果我设置元素的z索引,似乎不可能使固定元素落后于静态元素.
#over {
width: 600px;
z-index: 10;
}
#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
} <!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under">
</div>
</body>
</html>或者在这里的jsfiddle:http://jsfiddle.net/mhFxf/
我可以通过使用position:absolute
静态元素解决这个问题
,但任何人都可以告诉我为什么会这样吗？
(似乎有一个类似的问题,这个问题,(固定位置打破了z-index)但它没有一个令人满意的答案,因此我在这里用我的示例代码问这个问题)
推荐指数
解决办法
查看次数
是否可以将伪元素的堆叠顺序设置在其父元素下面？
我试图用:after伪元素CSS选择器设置元素的样式
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
看起来::after元素不能低于元素本身.
有没有办法让伪元素低于元素本身？
推荐指数
解决办法
查看次数
如何设置iPhone UIView z索引？
我想将一个视图移到另一个视图之上,我怎么知道视图的z索引,以及如何移动到顶部？
推荐指数
解决办法
查看次数
放置/重叠(z-index)视图在android中的另一个视图上方
我有一个线性布局,包括imageview和textview,一个在线性布局下面.
<LinearLayout android:orientation="horizontal" ... >
<ImageView
android:id="@+id/thumbnail"
android:layout_weight="0.8"
android:layout_width="0dip"
android:layout_height="fill_parent">
</ImageView>
<TextView
android:id="@+id/description"
android:layout_weight="0.2"
android:layout_width="0dip"
android:layout_height="wrap_content">
</TextView>
可能缺少一些规则,这是为了给出一个想法,布局看起来如何.我希望另一个小文本视图说50dip的长度和宽度,放在imageview上,"over"我的意思是z-index比imageview更多,我想把它放在imageview的中心和上面(重叠).
我想知道如何将一个视图放在另一个视图上方,具有不同的z-index(最好是线性布局)？
推荐指数
解决办法
查看次数
为什么z-index不起作用？
所以,如果我理解z-index正确,在这种情况下它将是完美的:
我想将底部图像(标签/卡片)放在它上面的div下面.所以你看不到锋利的边缘.我该怎么做呢？
z-index:-1 // on the image tag/card
要么
z-index:100 // on the div above
也不起作用.也不是这样的组合.怎么会？
推荐指数
解决办法
查看次数
IE7 Z-Index分层问题
我已经分离了一个IE7 z-index错误的小测试用例,但不知道如何修复它.我z-index一整天都在玩.
z-indexIE7有什么问题？
测试CSS:
input {
border: 1px solid #000;
}
div {
border: 1px solid #00f;
}
ul {
border: 1px solid #f00;
background-color: #f00;
list-style-type: none;
margin: 0;
padding-left: 0;
z-index: 1000;
}
li {
color: #fff;
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
span.envelope {
position: relative;
}
span.envelope ul {
position: absolute;
top: 20px;
left: 0;
width: 150px;
}
测试HTML:
<form>
<label>Input #1:</label>
<span id="envelope-1" class="envelope">
<input name="my-input-1" id="my-input-1" />
<ul>
<li>item</li> …推荐指数
解决办法
查看次数
如何在svg元素中使用z-index？
我在我的项目中使用svg圈子,
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
<g>
<g id="one">
<circle fill="green" cx="100" cy="105" r="20" />
</g>
<g id="two">
<circle fill="orange" cx="100" cy="95" r="20" />
</g>
</g>
</svg>
我在g标签中使用z-index 来显示第一个元素.在我的项目中,我只需要使用z-index值,但我不能将z-index用于我的svg元素.我google了很多,但我找不到任何相对的东西.所以请帮我在我的svg中使用z-index.
这是DEMO.
推荐指数
解决办法
查看次数
CSS z-index悖论花
我想通过z-index CSS属性创建一个自相矛盾的效果.
在我的代码中,我有五个圆圈,如下图所示,并且它们都是绝对定位的,没有定义z-index.因此,默认情况下,每个圆圈都与前一个圆圈重叠.
现在,圆圈5与圆圈1重叠(左图).我想要实现的悖论是同时在圆圈2下面和圆圈5上面圈出1圈(如右图所示).
http://paradox.schramek.cz/1.jpg
这是我的代码
标记:
<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div>
<div class="item i5">5</div>
CSS
.item {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid red;
background: silver;
border-radius: 50%;
text-align: center;
}
.i1 { position: absolute; top: 30px; left: 0px; }
.i2 { position: absolute; top: 0px; left: 35px; }
.i3 { position: absolute; top: 30px; left: 65px; }
.i4 { position: absolute; top: 70px; left: …推荐指数
解决办法
查看次数
css3在另一个div下投影,z-index无法正常工作
我正在尝试使用投影使其看起来像一个div(标题)在另一个"上方".我的问题是"中间"div正在覆盖阴影.我尝试使用z-index将标题div放在中间div上,但它不起作用(阴影仍然被覆盖).当我在div之间休息时,我可以看到阴影,因此我知道代码的一部分工作正常.我有以下HTML代码:
<div id='portal_header_light'>
<img src="Home.png" height="32px" \>
<img src="Wrench.png" height="32px" \>
</div>
<div id='middle'></div>
这个css:
#portal_header_light {
font-family:Arial, Helvetica, sans-serif;
font-size:12px; text-align:center;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
padding: 0px 3px 0px 3px;
background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));
-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
z-index:5;
}
#middle{
height:308px; …推荐指数
解决办法
查看次数