You cannot do that with a border. Interestingly though, you can do it with an outline * { box-sizing: border-box; } .parent { width: 200px; height: 200px; margin: 25px auto; position: relative; background: #bada55; border:12px solid #663399; outline: 12px solid red; padding:25px } .child { width: 220px; height: 100px; background: lightblue; } <div class=”parent”> <div … Read more
z-index property will not apply to statically positioned elements. In order to use z-index the CSS must also include any position value other than static (ie relative, absolute, fixed). .left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; } .right { float: left; width: 396px; background-color: … Read more
z-index is not that simple friend. It doesn’t actually matter if you put z-index:999999999999….. But it matters WHEN you gave it that z-index. Different dom-elements take precedence over each other as well. I did one solution where I used jQuery to modify the elements css, and gave it the z-index only when I needed the … Read more
Add wmode=transparent as param. Html solution <iframe title=”YouTube video player” width=”480″ height=”390″ src=”http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent” frameborder=”0″ > jQuery solution: $(document).ready(function () { $(‘iframe’).each(function(){ var url = $(this).attr(“src”); $(this).attr(“src”,url+”?wmode=transparent”); }); }); Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix
Default z-index of any element is ‘auto’ with exception of <html> which has default z-index:0. ‘Auto’ means that element gets z-index from its parent. You can see this by using Developer Tools (in Chrome) or any similar tool in other browser. Also you can get this in your code by window.getComputedStyle() as others proposed here.
The issue is mainly caused using negative z-index values, which seems to be making the parent div capture the mouse events. Use positive indexes, and assign position:relative to the link to get the expected behaviour, because without explicit positioning z-index will not do anything.
This should probably fix your issue on safari -webkit-transform:translate3d(0,0,0);
The reason the cyan box appears only when overflow-x and overflow-y are visible, and disappears otherwise, is simply because the cyan box is overflowing the cell box. overflow: visible simply means “paint this box even if it is overflowing its containing block” — the cell box is the containing block of the cyan box because … Read more
I believe z-index is relative to the nearest positioned element. So, if you had two divs inside the “1111” div, they could be z-index’d relative to each other, but since 2222 is a child of 1111, it cannot be z-indexed relative to 0000, and will always be above 1111.
Q: Is there a way for an element to ignore the stack context of any of it’s parent elements and ask to be positioned relative to the original stack context of the page? No, it’s not possible to transfer a positioned element between stacking contexts without repositioning the element in the DOM. You cannot even … Read more