英文:
Z-index issue - what I miss?
问题
这是网站，我没有创建它，我有一些任务，对于其中一个我需要一些帮助。不，我不会使用CODEPEN或其他东西，这个网站很大，我肯定会错过一些东西，所以最好使用F12检查器。
有一个标志。这个标志有一个:after元素，它产生了三角形和阴影效果。
它还创建了一个区域，不允许点击其他位于该区域下面的元素。当边框是透明的时候，很难看到，但如果在代码检查器中将其变成红色，就能看到。
我尝试改变标志本身和:after元素的位置 - 将标志设置为relative，:after设置为absolute，然后给:after设置z-index为-999，但没有帮助。这一切都在代码检查器中。
#header.lafka-has-header-top #logo {
top: -8px;
margin-bottom: 0;
position: relative;
left: 50%;
margin-left: -100px;
}
div#header div#header_top div#logo:after {
content: '''!important;
position: absolute;
top: 125px;
border: 100px solid red !important;
border-top: 30px solid #ffffff !important;
width: 170px;
z-index: -999;
}
标志下面的内容已经有z-index为100; 所以我不知道还有什么可以帮助的，我漏掉了什么？
1: https://terramare.com.ua/product/bavarian-pizza/
2: https://i.stack.imgur.com/44yx6.jpg
3: https://i.stack.imgur.com/VFHy3.jpg
4: https://i.stack.imgur.com/LZALR.jpg
英文:
This is the website, I didn't create it, I have some tasks, and with that one I need some help. NO - I wouldn't use CODEPEN or something, the website is very big, and 1000% I will miss something, so better to use the inspector F12
There's the logo. The logo has an :after-element, which makes the triangle and drop-shadow effect.
It also makes the area, that doesn't allow to click other elements which are under that area. When border is transparent, it's hard to see, but if to make it red in code inspector, it's visible
I tried to change positions of logo itself and the :after element - to make logo relative and :after - absolute, and then I gave z-index -999 to :after, it didn't help. All was in the code-inspector.
#header.lafka-has-header-top #logo {
top: -8px;
margin-bottom: 0;
position: relative;
left: 50%;
margin-left: -100px;
}
div#header div#header_top div#logo:after {
content: ''!important;
position: absolute;
top: 125px;
border: 100px solid red !important;
border-top: 30px solid #ffffff !important;
width: 170px;
z-index: -999;
}
The content under logo already has z-index 100; so I don't have ideas what else can help, what am I missing?
答案1
得分: 1
div#header div#header_top div#logo:after {
pointer-events: none;
}
英文:
div#header div#header_top div#logo:after {
pointer-events: none;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论