search
HomeWeb Front-endCSS Tutorialposition: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:

Copy code The code is as follows:


  • 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.
Copy code The code is as follows:

*{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]
Tip: You can modify part of the code first and then run
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:
Copy code The code is as follows:

We use the link Use mouse events to complete this show-hide effect:
Copy code The code is as follows:

*{ 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:
Copy code The code is as follows:

*{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]
Tip: You can modify some codes first and then run
Original reading:
http://andymao.com/andy/post/67.html
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
A Little Reminder That Pseudo Elements are Children, Kinda.A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

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

Improving Video Accessibility with WebVTTImproving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

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

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteWeekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

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.

Making width and flexible items play nice togetherMaking width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

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

Position Sticky and Table HeadersPosition Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryWeekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

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

IndieWeb and WebmentionsIndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

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

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

mPDF

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

SublimeText3 Chinese version

Chinese version, very easy to use

MantisBT

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.