


Note: The examples in this article may not be displayed under IE5.x. Please use IE6, IE7, Firefox, Opera and other browsers to debug!
Some time ago, I remember someone asked a question in the group that really made everyone confused:
- First block
-
Second block
- Third block
- Fourth block
- Fifth block
If we set LI to position:relative; set span to position:absolute; then we will find that no matter how high the z-index value of SPAN is set, it will always be behind the parent. under.
*{margin:0; padding:0; list -style:none;}
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}
li span {width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]
Try it. It is easy to find our children. The z-index value reaches 1000 and is set to position:absolut; the children are all archived in the parent. under. I thought about it for a long time, and I think the fundamental problem is: setting the same position: relative/absolute; the level between labels of the same level cannot be surpassed by z-index. In our example above, the level of the first LI will always be smaller than the level of the next LI, so we set position:absolute; on the children in LI, giving a very high z-index value.
Perhaps you may think of it this way: Wouldn't it be nice to just set position:relative; for the LI with span? Very correct. When no other LI sets position:relative; then the child we need can float above all content. But what if, in fact, span is required in all LIs, and all properties need to be the same? Of course we don't necessarily need this effect. But we need to have such an effect: all children are hidden, appear when there is a mouse reaction and float above all content. We need to know that this is indeed a headache, because as we saw above, the children are pressed under the next parent label when displayed. Let's implement the positioning effect of this mouse response:
We use the link Use mouse events to complete this show-hide effect:
*{ margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;}
li a:hover {background:#000000;}
li span {display:none;} li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000; }
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]
我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性,然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果,我们会发现,所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢,其实以CSS想强行突破是不太可能,所以我们反过来想,能不能让这个没有被触发的父级标签没有position:relative;属性,而只是触发的时候才有级这个父级赋上这样的值?其实想到这里基本上已经可以解决所有的问题了:
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {display:block; height:100px; width:100px; background:#000;}
li a:hover {position:relative; z-index:1; }
li span {display:none;}
li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]
我们只要针对a:hover来设定其属性为position:relative;就可以了,这样只有在鼠标触发的时候A才会被赋于一个相对定位的属性。这样就完成可以解决被其它父级标签所挡的尴尬了。
当然如果不介意IE6或是IE5.X这样的浏览器我们还可以把代码再做简化:
- First block
- Second Block
- The third block
- The fourth block
- The fifth block
CSS can be changed to this:
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}
li:hover {position:relative; z-index:1;}
li span {display:none;}
li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before it can be executed]
Original reading:
http://andymao.com/andy/post/67.html

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Notepad++7.3.1
Easy-to-use and free code editor

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment