Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.
COURSE of the MONTH
13 days, 15 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Solve overlapping issue
Posted on 2010-09-06
Hi Experts,
I have created a web page in ASP.NET , there is google map and on that there are some images.When I place mouse over that image a poup is shown and on right mouse button click on image a context menu ( user defined not of Browser) is displayed.
Context menu is created inside div and also popup window is also on div.To display popup mouseover event is handled and for context menu mouse event is handled.
when I select any image popup shown and on right click a context menu ( both as per feature) but problem is context menu is hidden behind the popup.I tried to set zindex,for popup I set zindex 0 and for context menu I give zindex 200 ( also test with more).
So please any suggestion how can i prevent this overlapping ?
One solution is by setting left position of popup less value but in that case look and feel is not good.So any other solution is welcome.
Thanks
I have created a web page in ASP.NET , there is google map and on that there are some images.When I place mouse over that image a poup is shown and on right mouse button click on image a context menu ( user defined not of Browser) is displayed.
Context menu is created inside div and also popup window is also on div.To display popup mouseover event is handled and for context menu mouse event is handled.
when I select any image popup shown and on right click a context menu ( both as per feature) but problem is context menu is hidden behind the popup.I tried to set zindex,for popup I set zindex 0 and for context menu I give zindex 200 ( also test with more).
So please any suggestion how can i prevent this overlapping ?
One solution is by setting left position of popup less value but in that case look and feel is not good.So any other solution is welcome.
Thanks
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
3
5 Comments
If I've understood you, the problem here is that your popup appears over the menu layer.
I've found this type of problems sometimes and found it were difficult to solve, although sometimes the solution were as easy as changing the order in wich elements are created on the document object model.
When you add subsequent layers one over another, they tend to put over existing ones. If you create all your layers at loading time and show/hide them on client events you should try to create the layers on this order: map --> popups --> menus
If you create and destroy the layers on client execution time your problem could be some CSS related issue, but there is where the real trouble starts, because it could be almost anything in your stylesheet. I would try to disable all the css and try to render my elements on the desired position, them start to enable css files checking that elements doesn't get disordered until I'd be able to found what's happening.
I hope this helps you a bit.
I've found this type of problems sometimes and found it were difficult to solve, although sometimes the solution were as easy as changing the order in wich elements are created on the document object model.
When you add subsequent layers one over another, they tend to put over existing ones. If you create all your layers at loading time and show/hide them on client events you should try to create the layers on this order: map --> popups --> menus
If you create and destroy the layers on client execution time your problem could be some CSS related issue, but there is where the real trouble starts, because it could be almost anything in your stylesheet. I would try to disable all the css and try to render my elements on the desired position, them start to enable css files checking that elements doesn't get disordered until I'd be able to found what's happening.
I hope this helps you a bit.
In case you have not tried, set the first z-index to 1 (0 may not be a valid value).
Second, z-index is only supposed to work on equal levels in the DOM-hierarchy (so if the popup is owned by '<body>' and the popup by a nested '<div>' the z-index won't affect each other)
Additionally both elements must have 'position', either position:absolute; or position:relative will do the trick, depending on your particular use case.
Most of all it would help if you have an example page where we can investigate the issue, as you see I've already come up with several possible scenario's either or all could apply...
Second, z-index is only supposed to work on equal levels in the DOM-hierarchy (so if the popup is owned by '<body>' and the popup by a nested '<div>' the z-index won't affect each other)
Additionally both elements must have 'position', either position:absolute; or position:relative will do the trick, depending on your particular use case.
Most of all it would help if you have an example page where we can investigate the issue, as you see I've already come up with several possible scenario's either or all could apply...
hi,
as per solution given by Bardobrave or by mreuring I already worked on both but i did not get any success.
At last I found the solution that I change the position of tool tip popup by using top and left position of mouse and then using div clientheight and clientwidth value,little bit calculation and finally problem is solved.
as per solution given by Bardobrave or by mreuring I already worked on both but i did not get any success.
At last I found the solution that I change the position of tool tip popup by using top and left position of mouse and then using div clientheight and clientwidth value,little bit calculation and finally problem is solved.
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property
Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing.
Set up your basic HTML file. Open your form tag and set the method and action attributes.:
(CODE)
Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month13 days, 15 hours left to enroll
800 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.