如何设计浮动的DIV或Panel?

Question

想在DIV（或Panel)中加入有关查询的控件如TEXTBOX和BUTTON，然后用户按Ctrl+F组合键后让这个DIV显示出来，并且是浮动在其它控件之上，且可用鼠标移动它，当用户输入查询条件并按开始查询按钮后这个DIV又自动隐藏。
请问这种功能如何设计？

Answer 1

js jquery 控制层的显示 隐藏在所有控件之上是css属性z-index 值越大 越在上面鼠标拖动

Answer 2

<div id="opwindow" class="login" style="display: none">
        <div id="opwindowtitle">
            <div id="optitle" class="logintitlestr">
               </div>
            <div id="closeopwindow" onclick="closewindow()" onmouseover="overclose(this)" onmouseout="outclose(this)">
                ×</div>
        </div>
        <div id="opcontent">
        
        </div>
    </div>
var ww="窗口"宽度;
var wh="窗口"高度; function moveWindow(winname)
 {
    var h1 = document.body.clientHeight;
    var h2 = document.documentElement.clientHeight;
    var isXhtml = (h2<=h1&&h2!=0)?true:false; 
    var body = isXhtml?document.documentElement:document.body;    var o=document.getElementById(winname);
    var lf=(body.clientWidth-ww)/2-50;
    o.style.left=lf+"px";
    o.style.top=(document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop) +
      ((document.documentElement.clientHeight == 0)?document.body.clientHeight:document.documentElement.clientHeight)
      -wh-200+'px';
    if(o.style.display=="")
    setTimeout("moveWindow('"+winname+"')",20);
 }
function closewindow()
 {
    document.getElementById("login").style.display="none";
    document.getElementById("opwindow").style.display="none";
 }
 function overclose(o)
 {
    o.style.backgroundColor="#F6F2EA";
    o.style.color="#F10000";
 }
 function outclose(o)
 {
    o.style.backgroundColor="#D4D0C8";
    o.style.color="#000000";
 } 

Answer 3

1.母容器用 相对定位 position:relative
2.浮动元素放在母容器中,用绝对定位:position:absolute3 这样就浮动起来了,一般还要给浮动元素的Z-index设置一个较高的值

Answer 4

楼主，你会不会 asp.net ajax框架技术
<asp:Panel ID="PanelLogin" runat="server">
   <asp:TextBox ID="txtLogin" runat="server" Width="146px">
   <asp:Button ID="Button1" runat="server" Text="Button"  OnClick="Button1_Click" />
   <asp:Button ID="CancelBtn" runat="server" Text="Button" /> <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"TargetControlID="hid" PopupControlID="PanelLogin" DropShadow="true" CancelControlID="CancelBtn" Drag="true" BackgroundCssClass="bgcss">
 </cc1:ModalPopupExtender>
</asp:Panel>
<input id="hid" type="hidden" runat="server" />