KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I am writing a chrome extension which using injection to modify the element in target webpage. I want to show a message bubble when cursor move on an element. But I encounter a problem that sometimes the message bubble is hidden by some other elements. I found that it was because z-index will not work if an element B sits on top of element A, a child element of element A(message bubble) can never be higher than element B. To demonstrate it,Here is an example. That obj2 will always be hidden by obj3, although obj2's z-index is 1000000. Is there any solutions for it? .aaa{ background-color:blue; width:100px; height:100px; } .ccc{ background-color:red; width:80px; height:80px; z-index:1000000; } .bbb{ background-color:green; position:relative; top:-50px; left:50px; width:100px; height:100px; } <div> <section id=obj1 class="aaa"> <article id=obj2 class="ccc"> </article> </section> </div> <section id=obj3 class="bbb"> </section>
Tags (comma-separated)
Save Edits
Cancel