Tag: z index

z-index在IE中无法在iframe中使用pdf: 我不能让一个包含IE8的PDF文件的iframe工作。它适用于Google Chrome。示例（ JSFiddle ）： HTML <div id="div-text"> <div id="shouldBeOnTop">my text that should be on top</div> </div> <div id="div-frame"> <iframe src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"/> </div> CSS #div-text{ position:relative; left:210px; top:20px } #shouldBeOnTop{ position:relative; right:60px; background-color:red; width:100px; z-index:2; } #div-frame{ position:relative; z-index:1; }

::在伪元素堆栈顺序问题之前: 静态定位时，:: before伪元素堆栈（z-index）在子元素的内容之前，但是在子元素的后面。任何人都可以解释为什么，甚至是如何发生这种情况，或者如果这是所有主stream浏览器的问题？ <style> div { background-color:yellow; width:400px; } div::before { background-color:red; content:"div::before"; } div::after { background-color:green; content:"div::after"; } div p { background-color:blue; color:white; margin:-15px 0; padding:0; } </style> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.</p> </div> http://jsfiddle.net/funkyscript/ALrgf/

使用z-index将div取得另一个div: 我希望div1高于div2 。我尝试使用z-index但它不起作用。我试过这个代码： div { width: 100px; height: 100px; } .div1 { background: red; z-index: 1; } .div2 { background: blue; margin-top: -15vh; z-index: 2 } <div class="div1"></div> <div class="div2"></div>

Z指数相对还是绝对？: 我试图find以下问题的答案：元素的z-index样式是其绝对堆栈顺序还是相对于其父级的堆栈顺序？例如，假设我有以下代码： <div style="z-index:-100"> <div id="dHello" style="z-index:200">Hello World</div> </div> <div id="dDomination" style="z-index:100">I Dominate!</div> 哪一个会在前面 – #dHello或#dDomination？这只是例子。我已经在多个地方尝试了这一点，结果似乎有所不同。我看到有没有人知道权威来源的解决办法： 1）关于z-index的实际标准是什么（关于这个话题具体）？ 2）各个浏览器在实际执行中如何变化？谢谢！

Internet Explorer的Z-index错误？: 如何将某个元素与Internet Explorer中相对定位的另一个元素重叠？ Z-index不起作用，它总是出现在相对定位的元素后面。

你怎么能找出你的文档中最高的z-index？: 为了在我的文档中设置一个包含透明文本图像的div作为最高的z-index，我select了数字10,000，它解决了我的问题。以前我已经猜到数字3，但没有效果。那么，有没有一种更科学的方法来确定Z指数是高于其他所有元素的呢？我试图在Firebug中查找这个指标，但找不到它。

如何让父元素出现在子元素上方: 我有两个嵌套的CSS元素。我需要让父元素位于子元素的顶部，即z轴上方。只是设置z-index是不够的。我无法为子设置一个负Z-index，它会将其设置在实际页面上的页面容器下方。这是唯一的方法吗？ .parent { position: relative; width: 750px; height: 7150px; background: red; border: solid 1px #000; z-index: 1; } .child { position: absolute; background-color: blue; z-index: 0; color: white; top: 0; } .wrapper { position: relative; background: green; z-index: 10; } <div class="wrapper"> <div class="parent"> parent parent <div class="child"> child child child […]

哪些CSS属性创build堆栈上下文？: 我正在研究堆叠上下文，并使用创build堆栈上下文的属性进行一些testing。我做了几个testing，发现除了z-index ，下面的属性还创build了一个堆栈上下文： none opacity不是1 ; 和perspective 。是否有其他属性适用堆栈上下文？

z-index通过设置变换（旋转）来取消: 使用transform属性，z-index被取消并出现在前面。（当注释掉-webkit-transform时，z-index在下面的代码中正常工作） .test { width: 150px; height: 40px; margin: 30px; line-height: 40px; position: relative; background: white; -webkit-transform: rotate(10deg); } .test:after { width: 100px; height: 35px; content: ""; position: absolute; top: 0; right: 2px; -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */ -webkit-transform: rotate(3deg); /* Safari and Chrome */ transform: rotate(3deg); z-index: -1; } […]

是否可以设置其父元素下方的伪元素的堆叠顺序？: 我正在尝试用伪元素CSSselect器来devise一个元素 elementTag{position:relative; z-index:1;} elementTag:after{position:relative; z-index:0; content:" "; position:absolute; width:100px; height:100px;} 看起来像:after元素不能低于元素本身。有没有办法让伪元素低于元素本身？