creating help panel

[crosemffet]

the page has 2 sections, the top section is newsPanel and the rest is mainPanel
the idea is create one help panel, that shows help instructions in fromt of the mainPanel, covering this panel with instructions, in case the user needs it. the help must be closed until user's request (made with one button in any part of the mainPanel).
my code is:
<div style="margin:10px 10px;">
    <div id="newsPanel" class="easyui-panel" style="width:$(window).width()-100;height:40px;padding:10px 10px 10px 10px;"></div>
    <div style="width:$(window).width()-100;height:10px"></div>
    <div id="mainPanel" class="easyui-panel" title="Main Panel" style="width:$(window).width()-100;height:668px;padding:10px 10px 10px 10px;"></div>
    <div id="helpPanel" class="easyui-panel" style="position:absolute;top:50px;bottom:10px;padding:10px;background:#FFFFFF;" data-options="title:'HELP',closable:true,closed:true"></div>
</div>
the problem is: everything goes fine, except the help panel always shows in the bottom of the page, after the mainPanel, not over the mainPanel.
so, what's wrong?
thanks in advance,

[stworthy]

To create a panel with absolute attribute, a style property must be applied to the outer panel object. Try the following code:

Code:

<div id="helpPanel" class="easyui-panel" style="padding:10px;background:#FFFFFF;" data-options="title:'HELP',closable:true,closed:true,
		style:{
			position:'absolute',
			left: 50,
			top: 50
		}"></div>

As an absolute panel, the width and height need to be set before display on screen.

Code:

$('#helpPanel').panel('open').panel('resize',{
	width:$(window).width()-100,
	height:$(window).height()-100
});

[codeguyross]

I was able to use this post to help me position a panel on the right side of the screen. Thanks for this answer stworthy!