SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    making a div appear on top of ther elements

    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
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

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

  3. #3
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Generally you use div{position: absolute;}. It can get more complicated.

  4. #4
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    at present for div i have this style

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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    .overlay {
        left: 691px;
        position: absolute;
        top: 388px;
        width: 295px;
        height: 202px;
        z-index:999;
    }
    Code:
    ...page stuff
    ...
    
    <div class="overlay">overlay</div>
    </body>

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, Paul O'B's suggested CSS class definition should work to position the element over other elements in the page.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •