


position:relative/absoluteThe level that cannot be broken_Experience exchange
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

Here's a container with some child elements:

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:


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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

Dreamweaver CS6
Visual web development tools

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Chinese version
Chinese version, very easy to use

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.