Click here to Skip to main content
13,398,338 members (35,146 online)
Click here to Skip to main content
Add your own
alternative version


14 bookmarked
Posted 10 Nov 2005

A workaround to overlap an ActiveX with an HTML element

, 10 Nov 2005
Rate this:
Please Sign up or sign in to vote.
This workaround allows you to show HTML elements on top of ActiveX elements (an tag).

Sample Image - OverlapActiveX.jpg


Every HTML writer knows a problem with overlapping dropdown lists (<SELECT> tag) and ActiveX-s. Any effort to bring a DIV or any HTML element on top of an ActiveX has no effect. An ActiveX stays always on top even if it has higher z-index than an HTML element. The reason is the way the Explorer renders its content. See;en-us;177378.

There are two types of controls: Windowed and Windowless elements, and they are rendered on separate planes. All windowed elements paint themselves on top of all windowless elements, despite the wishes of their container. However, windowed elements do follow the z-index attribute with respect to each other, just as windowless elements follow the z-index attribute with respect to each other.

All windowless elements are rendered on the same MSHTML plane, and windowed elements draw on a separate MSHTML plane. You can use z-index to manipulate elements on the same plane, but not mix and match with elements in different planes. You can rearrange the z-indexing of the elements on each plane, but the windowed plane always draws on the top of the windowless plane.

The <OBJECT> tag is, in most cases, windowed. That is why it always stays on top.

The Workaround

My workaround is as simple as stupid. When you want to show an HTML element (a <DIV>, for instance) above an ActiveX, you create a screenshot of an ActiveX, save it to a temporary folder, and replace the ActiveX with this image. Finally, you revert these changes, hide the image, and show the ActiveX.


I use capture routines from the Microsoft article How To Capture and Print the Screen, a Form, or Any Window (;en-us;Q161299). And then I save it to file using a memory stream. All this is implemented in VB6, but it can be easily ported to C++ because most of the functionality is in the Windows API calls. A public function GetImageFileName() of an ActiveX is responsible for creating of a screenshot and returns the full name of the created file.

JavaScript bound to the checkbox operates the replacement procedure.

Installation and Demo

In the Zip file, you will find the following:

  • VB6 project of an ActiveX: OverlapDemoControl.vbp.
  • Compiled ActiveX: OverlapDemoControl.ocx.
  • HTML containing the <OBJECT> tag, the <DIV> tag, and the appropriate JavaScript: OverlapActiveX.htm.

To run the example from Visual Basic, you need just to open and compile the project. Otherwise you can just register OverlapDemoControl.ocx using regsvr32. To test, just click on the CheckBox.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

George Mamaladze
Software Developer
Germany Germany
Tweeter: @gmamaladze
Google+: gmamaladze

You may also be interested in...

Comments and Discussions

GeneralA COM grid control that wont render. Pin
bgriffin_tpa26-Jul-07 5:29
memberbgriffin_tpa26-Jul-07 5:29 
GeneralJust wondering about iFrame Pin
eug_acc (Eugene Akimov)11-Nov-05 15:10
membereug_acc (Eugene Akimov)11-Nov-05 15:10 
AnswerRe: Just wondering about iFrame Pin
George Mamaladze14-Nov-05 23:46
memberGeorge Mamaladze14-Nov-05 23:46 
Bugerror details Pin
JUDERAJ20113-Jan-12 3:40
memberJUDERAJ20113-Jan-12 3:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180216.1 | Last Updated 10 Nov 2005
Article Copyright 2005 by George Mamaladze
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid