CSS I Want a Div to Be on Top of Everything

CSS I want a div to be on top of everything

In order for z-index to work, you'll need to give the element a position:absolute or a position:relative property. Once you do that, your links will function properly, though you may have to tweak your CSS a bit afterwards.

How to make a Div appear on top of everything else on the screen?

z-index is not that simple friend. It doesn't actually matter if you put z-index:999999999999..... But it matters WHEN you gave it that z-index. Different dom-elements take precedence over each other as well.

I did one solution where I used jQuery to modify the elements css, and gave it the z-index only when I needed the element to be on top. That way we can be sure that the z-index of this item has been given last and the index will be noted. This one requires some action to be handled though, but in your case it seems to be possible.

Not sure if this works, but you could try giving the !important parameter too:

#desired_element { z-index: 99 !important; }

Edit: Adding a quote from the link for quick clarification:

First of all, z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. Secondly, z-index values can create stacking contexts, and now suddenly what seemed simple just got a lot more complicated.

Adding the z-index for the element via jQuery, gives the element different stacking context, and thus it tends to work. I do not recommend this, but try to keep the html and css in a such order that all elements are predictable.

The provided link is a must read. Stacking order etc. of html elements was something I was not aware as a newbie coder and that article cleared it for me pretty good.

Reference philipwalton.com

Make div display on top of everything

Without seeing the actual styles, here's one possibility - Make sure the element that you are changing the z-index of is either position: relative;, absolute, or fixed.

How to make div on top of all other control

Since you want to cover the whole screen, I recommend this:

#overlayDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:99;
}

Note, you don't have to set the display and visibility properties. Also, don't set padding or margin on this element! If you want it to have a padding, set a margin on its child/children.

Also, make sure that the DIV in question is a direct child of the BODY element.

Make specific div or any element display on top of all others

First I wanted to thank all who came here and tried to help me! So I found the solution and I'm posting the whole snippet below.

Note that the changes were only in the CSS:

a.tditems_tooltip span > table {
  position: fixed;
  transform: translateY(-100%);
}

#left_div {  max-height:170px;  overflow-x:hidden;  overflow-y:scroll;}a.tditems_tooltip {  position: relative;  display: inline-block;  text-decoration:none;}a.tditems_tooltip span {  position: absolute;  max-width:400px;  color:#FFFFFF;  line-height:16px;  padding:0;  background:url('/layouts/background.gif');  border: 1px solid #CFB57C;  text-align: center;  display: none;  text-decoration:none;  font-size: 12px;  box-shadow: 0 1px 4px #AAAAAA;}a.tditems_tooltip span:after {  content: '';  position: absolute;  top: 100%;  left: 0%;  margin-left: 150px;  max-width:800px;  text-decoration:none;}a:hover.tditems_tooltip span {  display: inline-block;  bottom: 100%;  left: 0%;  margin-left: -3px;  z-index: 1000;  text-decoration:none;}a.tditems_tooltip span > table {  position: fixed;  transform: translateY(-100%);}

<table border="0" cellspacing="1" cellpadding="1" width="400" height="300">  <tr>    <td width="50%">      <div id="left_div">        </br>        </br>        </br>        </br>        <a class="tditems_tooltip">          <font color="red">TRIGGER</font>          <span>            <table border="0" cellspacing="0" cellpadding="1" width="300">              <tr bgcolor="green">                  <td>CONTENT OF TOOLTIP</td>              </tr>            </table>          </span>        </a>        </br>        </br>        </br>        </br>        </br>        </br>        </br>        </br>      </div>    </td>    <td width="50%">INSIGNIFICANT CONTENT</td>  </tr></table>

Allow a div to cover the whole page instead of the area within the container

Add position:fixed. Then the cover is fixed over the whole screen, also when you scroll.

And add maybe also margin: 0; padding:0; so it wont have some space's around the cover.

#dimScreen
{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

And if it shouldn't stick on the screen fixed, use position:absolute;

CSS Tricks have also an interesting article about fullscreen property.

Edit:

Just came across this answer, so I wanted to add some additional things.

Like Daniel Allen Langdon mentioned in the comment, add top:0; left:0; to be sure, the cover sticks on the very top and left of the screen.

If you want some elements to be at the top of the cover (so it doesn't cover everything), then add z-index. The higher the number, the more levels it covers.

Float a div above page content

You want to use absolute positioning.

An absolute position element is
positioned relative to the first
parent element that has a position
other than static. If no such element
is found, the containing block is
html

For instance :

.yourDiv{
  position:absolute;
  top: 123px;
}

To get it to work, the parent needs to be relative (position:relative)

In your case this should do the trick:

.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}

How to place DIV on top of all and on the middle of page?

Use a slightly different markup and css to position both your overlay and your popup.

Build a simple markup like this:

<form id="form1" runat="server">
    ...
</form>
<div id="overlay"></div>
<div id="popup">Popup</div>

Notice I haven't put the popup within the overlay. While there is no hurt to do this, if you want to style your overlay with css opacity, everything contained in it will also be semi-transparent.

Then use the following CSS:

#overlay {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    z-index:998;
    background-color: Black;
    opacity: .5;
}

#popup {
    position: absolute;
    width:50%;
    background-color:#8DA5C6;
    z-index: 999;
}

Both elements must have position: absolute to go out of the page flow.
The overlay must cover the whole space. This is achieved with top, left, right, bottom, width, height
Using z-index, you can then make them stay on top of other things. A lower one for the overlay and a higher one for the popup

You can check this fiddle for a working example.

Note:

This does not center the popup. It requires a bit more work to do so and it's a bit more complex (has the popup a fixed size or not, should the popup stay centered while resizing the window...).

It would require a bit of javascript I guess.

You can't use margin: 0 auto; on absolute positionned elements.

CSS I Want a Div to Be on Top of Everything