负z-index会删除非静态定位元素的悬停功能
我只是注意到将z-index:-1设置为非静态定位元素会删除它们的悬停功能.令人惊讶的是,绝对和固定定位元件的悬浮能力随条件而变化,
相对定位: <!DOCTYPE html><html> <style> .tooltip { position: relative; display: block; border: 5px solid black; padding: 5px; z-index: -1; } .tooltip:hover { color:red; background-color: yellow; } 绝对定位后的文字: <!DOCTYPE html><html> <style> .tooltip { position: absolute; display: block; border: 5px solid black; padding: 5px; z-index: -1; } .tooltip:hover { color:red; background-color: yellow; } 固定后用文字定位: <!DOCTYPE html><html> <style> .tooltip { position: fixed; display: block; border: 5px solid black; padding: 5px; z-index: -1; } .tooltip:hover { color:red; background-color: yellow; } 问题:为什么设置z-index:-1会删除绝对/固定定位元素的悬停功能,部分是否在它们之后有文本,以及完全相对定位的元素? 附录:在其他用户的帮助下,我理解了这个概念.但仍然存在一些疑虑:
最佳答案 你可能知道z-index是如何工作的? >使用正z-index时,元素将移动到上层. 现在,让我们看看下面的图片: 在上图中,文档的流程是正常的.当元件div相对定位时,包装元件的高度自动增加.并且z-index被设置为1层直到包装元素.我们可以将鼠标悬停在元素上,因为它位于包装器上方. 在前面的图片中,元素的z-index设置为-1,这意味着元素层是向下到包装元素的1层.覆盖包装元素位于元素上方,我们不能将其悬停在该元素上. 在上图中,文档的流程不正常,因此称为流出.由于div元件固定或绝对定位,因此包装元件的高度不会增加.并且z-index设置为1层直到包装元素,我们可以将鼠标悬停在元素上. 在前面的图片中,这意味着元素层是向下到包装元素的1层.并且覆盖包装元件位于元件上方,但是元件没有被包装物覆盖,因为其高度没有增加到层,这就是为什么我们仍然可以将鼠标悬停在固定或绝对定位的元件上. 希望!这样可以清楚地了解z-index. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |