z-index

问题 I am trying to create a sort of "window" effect where the div positioned above all the other elements is like a window through the overlay (background color) element positioned exactly below it. Here is an example of what I mean. I would like the text to show through as if you were looking through a window. How can this be done without the use of images? Solution: One solution is to create a very wide semi-transparent border. However, that approach affects the overall dimensions (or

问题 Is it possible to get a CSS pseudo :after element behind the background of it's parent element? The background of the :after contains equal dimensions as the parent element's background. So currently it looks like this: But I want the red background ( :after ) to go behind the parent element. So I've added position: relative to the parent and absolute to the pseudo element. Trying to archive this I've used this code: .btn { position: relative; display: inline-block; padding: .8rem 1rem; font

问题 There's a fixed positioned layer with a bottom z-index that keeps popping up over the top of a relative positioned layer with an upper z-index. When the above layer scrolls over the top of the lower layer the fixed below layer appears on the top then disappears again when the page stops moving. The behavior happens on all the different "work" pages viewed in landscape "@media screen and (max-width: 1100px)" on an ipad. I have only tested on an ipad tablet not any other tablets. Note:The

问题 I have some controls added in a stackpanel programmatically. What i want to do is that i want one of the controls in this stackpanel to be placed over another control. Specifically, I want to place button over an image in this stack panel. I couldn't find zindex property in c# codebehind. Although it seems very simple problem but i am unable to find any clue to solve this problem. Anyone please......?? 回答1: Try placing all your controls on Canvas. Then you can set Zindex with: this

问题 I was working on my code when I stumbled upon this fun fact: z-index doesn't work for a fixed element and, therefore, fixed elements will always be in front. Is there a way to place a non-fixed element in front of a fixed element? Thanks. #fixed { background-color: red; width: 500px; height: 500px; position: fixed; z-index: 0; } #normal { background-color: blue; width: 500px; height: 500px; z-index: 1; } <div id = 'fixed'> I'm Fixed </div> <div id = 'normal'> I'm Normal </div> 回答1: Unless you

问题 I am using drop-down menu in my header for notification, but when drop down opens all the div's behind that are visible then I gave z-index to all the divs but the links on those div's are not clickable now! drop-down div CSS: .drop-down{ overflow:scroll; overflow-x:hidden; } and the div's behind it are #main-div{ z-index:-1; position:absolute; } 回答1: I guess that the negative z-index places the links underneath the body. Use a positive z-index , for example 10 on the element that should be

问题 Due to the structure of my website, I am forced to use a iframe to display the dropdown menu html file. if not, I am not able to see the dropdown in IE. Here is the code I am using: <iframe id="a"name="FRAMENAME" src="http://website.com/dropdown.html" width="1000" style="position:relative" background="#F3F0ED" style="z-index:10000" height="40" frameborder="0" scrolling="no" allowautotransparency=true></iframe> Now the problem is that the dropdown is hiding behind the other images on the

问题 I am currently working with Leaflet and Mapbox to create a custom map. All has been working fine until I started to work on the popups. My situation: I have a custom navigation/control panel that will be used but it needs to be behind any open popups (which it currently is not). I have prepared a JSFiddle and this screenshot Part of my CSS is #map-nav { position: absolute; left: 10px; top: 10px; z-index: 2; } .leaflet-popup-pane, .leaflet-popup { z-index: 1000 !important; } The default

问题 I'm facing one of the craziest problems I've ever found in css... I have two CSS-jQuery horizontal dropdowns, one up and one below, displaying the drop-list when clicking on it. The problem comes when I click the upper dropdown in IE6 and IE7, and absolute positioned element goes over relative positioned ones. Upper dropdown list (absolute) shows behing the dropdown (relative) below. JavaScript: $("button").click(function(e){ $(".menu").hide(); $(this).siblings(".menu").show(); e

问题 I am needing to override the notion of inherited z-indexes. For instance in this code <style> div{ background-color:white; top: 0px; bottom: 0px; left: 0px; right: 0px; } </style> <div style="position: fixed; z-index: 2;"> div 1 <div style="position: fixed; z-index: 3;"> div 2 </div> </div> <div style="position: fixed; z-index: 2;"> div 3 </div> http://jsbin.com/epoqo3/3 I want for div 2 to be displayed, but instead div 3 is displayed. How can I change this behavior without changing my