Making a div appear on top of ther elements

HTML & CSS
1

i have a div on a page with few control in asp.net page

the div is displayed only on a button click
wht i want is when the div is displayed it shld appear on the top of other control and opaque so that the elements below doesnot appear on the div
how do i achieve it

2

2 options:

1 - if you’re using asp.net, instead of placing those controls in a div, place them in a “panel” (server) control (<asp:Panel id=“yourPanel” runat=“server” CssClass=“styleName” visible=“false”>controls</asp:Panel>)

Then, place code in your button click handler to enable visibility on the panel. Like this: this.yourPanel.visible = true; (c#), Me.yourPanel.visible = true (vb)

  1. If you prefer using divs, you may find that javascript (client-side) code would suit you better.
3

Generally you use div{position: absolute;}. It can get more complicated.

4

i had tried using panel and bale to make it visible fasle or true on button click
even with div and using runat=“server” i am bale to make it visible flase/true
my prblm is i want this div to appear on other div just as the popup window appears
now wht happens is this div which has few controls on it when visible appears below other controls which is there on page ,i want it to appear above all the other controls of teh page

5

at present for div i have this style

style=" display: inline;left: 691px; position: absolute;
top: 388px; width: 295px; height: 202px;

6

The element must be outside your current structure completely and then you just give it a higher z-index than anything else on the page.


.overlay {
    left: 691px;
    position: absolute;
    top: 388px;
    width: 295px;
    height: 202px;
    z-index:999;
}




...page stuff
...

<div class="overlay">overlay</div>
</body>
7

Yes, Paul O’B’s suggested CSS class definition should work to position the element over other elements in the page.