z-index

问题 Instead of scrolling down the page to view a bunch of divs, I would like them to overlay in the same place-- one stacked on top the next -- when you scroll. So, you would scroll down, but the page would not go down. Instead, the next div would overlay the first and so on and so forth. Not sure how to do this? Here is what I have: UPDATE .container { width:100%; height:100%; position:relative; } .container1 { display:block; position:fixed; margin-top:690px; width:100%; height:500px; z-index:1;

问题 Example Markup: <div class="wrapper"> <h2>Trigger</h2> <div>This is some content</div> </div> <div class="wrapper"> <h2>Trigger</h2> <div>This is some content</div> </div> <div class="wrapper"> <h2>Trigger</h2> <div>This is some content</div> </div> Example CSS: .wrapper {z-index: 1} .wrapper div {display: none; position: absolute;} Via javascript (jQuery) I'm attaching a click event to each h2 that will then switch the content div to display: block. The intent is that these are expandable

问题 I have a case where a 3rd party ad is bleeding through my modal window implementation. I'd like to up the z-index of the modal overlay as high as possible so the ad won't show on top of it. Is there a limit to z-index values? I'm sure if there is it varies by browser. Anyone know? 回答1: Keep in mind that z-index doesn't work globally, but only within a 'stacking context' (which has hard to digest definition in CSS), and if the ad establishes it's own stacking context, then z-index values you

问题 Ive a ListBox with a Canvas ItemsPanel that displays 2 different types of objects: NodeVMs and LinkLineVMs (using a CompositeCollection). Each VM object has a DataTemplate: NodeVMs DataTemplate has a TextBlock (A) LinkLineVMs DataTemplate has a Line (B) and a TextBlock (C) How get the following absolute z-order: A (top), C, B (bottom). <ListBox> <ListBox.Resources> <DataTemplate DataType="{x:Type p:NodeVM}"> <StackPanel> <TextBlock ... /> ... </StackPanel> </DataTemplate> <DataTemplate

问题 Problem I have a custom tab control using Chrome-shaped tabs that binds to a ViewModel. Because of the shape, the edges overlap a bit. I have a function that sets the tabItem's ZIndex on TabControl_SelectionChanged which works fine for selecting tabs, and dragging/dropping tabs, however when I Add or Close a tab via a Relay Command I am getting unusual results. Does anyone have any ideas? Default view: Removing Tabs: Adding 2 or more Tabs in a row: Adding more then 1 tab at a time will not

问题 I'm trying to figure out why the control does not honor ZIndex. Example 1 - which works fine <Canvas> <Rectangle Canvas.ZIndex="1" Height="400" Width="600" Fill="Yellow"/> <Rectangle Canvas.ZIndex="2" Height="100" Width="100" Fill="Red"/> </Canvas> Example 2 - which does not work <Canvas> <WebBrowser Canvas.ZIndex="1" Height="400" Width="600" Source="http://www.stackoverflow.com"/> <Rectangle Canvas.ZIndex="2" Height="100" Width="100" Fill="Red"/> </Canvas> Thanks, -- Ed 回答1: Unfortunately

问题 When I "fullscreen" an element (let's say a div), I can't get anything other elements to appear (while in fullscreen mode). Why is that happening? How can I accomplish this? Related: Is there a way to overlay a <canvas> over a fullscreen HTML5 <video>? 回答1: It seems that browsers (Chrome 28, Firefox 23) set the z-index of fullscreened elements to 2147483647 (the largest 32-bit signed number). According to tests, setting the z-index of other elements to the same z-index will cause them to show

问题 Running in compatibility mode the calendar below renders behind the textboxes below. IE8 displays the calendar how I need it to. My CSS .MyCalendar .ajax__calendar_container { border:1px solid #7F9DB9; background-color: #ffffff; z-index : 1004 ; width:190px; } the textboxes which are overlaying the calendar don't have their z-index set anywhere although I have tried in my server side code to set their z-index to -1 if I detect IE7 to no avail. Any suggestions? 回答1: IE has problems with z

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 4 years ago . I use jQuery to make a div apear, when i click onto a button -> the background should get a opacity of 0.8 and the appeared div will allow the user to let him login - everythings alright when i don't use z-index, but i have 4 divs (header, content, footer, and the div with login-Form) header must have z-index:3

问题 I would like to allow user to be able to move order of custom google maps marker on a click inside an InfoWindow. This is to overcome issue of overlapping markers. I have considered other solutions (move lat/lon, marker clusters, "spider markers"). My code has 2 issues: 1) jquery listener not working 2) but more important how to implementing change of z-index (or other technique?) and redisplay. <!DOCTYPE html> <html> <head> <style> #map-canvas, #side-bar { height: 500px; width: 600px; } <