Good Day, I used position:absolute for many div's in my website. I have used nearly 35 - 40 divs with absolute property.
Now i have a issue with z-index say some divs get hides, I realize this is because of z-index problem. I never declared z-index in my css.
I need to track the z-index of each divs. Is there any programs or scripts to find the z-index of the div's in my website?
Thanks in Advance
You can use https://addons.mozilla.org/de/firefox/addon/60 for that.
Use the topography feature or the display z-index featur under "Information"
First, it sounds like really bad programming having nearly 40 divs all using position:absolute and z-index. I would strongly recommend that you change the code to something more "user friendly".
But in this case, I would use jQuery to track your DIVs.
create an array where you put the ID for each div in.
Then you can loop through it and compare z-index values.
Or loop through the divs using the $.()each function.
Readmore about jQuery each here: http://docs.jquery.com/Core/each
You can use a usual DOM recursive iteration to get to the id of the particular div you want and then display the z-index.
element = getFromDOM(your_div_id);
alert (element.style.zindex);
However, I would suggest you install Firebug in Firefox and view / alter the z-index of the div you want dynamically. Get Firebug here - http://getfirebug.com/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Edit to reopen:
It seems to be difficult to position elements over a google map. Using z-index does not solve the problem which is described below: Google Maps will stay on top of some other elements even when using high z-indexes.
The question is:
Is it possible to have a div cover parts of a google map?
I have the following popup:
But when i move this popup up to appear over the map, it gets hidden:
How to force something to be the top most, always displayed object on screen?
I have tried setting the z-index on my CSS property sheet, but this did not work.
Is there some HTML/CSS property i can set so that the popup, which is a DIV, actually always sets on top of everything else?
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
Try setting position to absolute, ie.
#yourDiv{
position: absolute;
z-index: 10;
};
Are you using position: relative?
Try to set position: relative and then z-index because you want this div has a z-index in relation with other div.
By the way, your browser is important to check if it working or not. Neither IE or Firefox is a good one.
you should use position:fixed to make z-index values to apply to your div
Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a position other than static set on it, too.
CSS:
#someDiv {
z-index:9;
}
Read more here: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
One form to do this is insert the panel that you want to expand inside a DIV setted as relative: let me show you:
<div style="position:relative">
<div style="position:absolute; z-index: 1000;">
your code
</div>
</div>
You use the first div to position the inner content in a specific area inside your page and the second absolute should be referred to the container (because is relative) The z-index in this case is referred also to container and if it higher that the container should be at top. You can put the style in a CSS class and change the size of the absolute div to expand it on hover or another action that you want to control.
I hope that this help
dropdowns always show up on top, only solution for this problem is to hide dropdowns when image is displayed (display:block or visibility:visibile) and show them when image hidden (display:none or visibility:hidden)
I have a set of ASP:Images in my project.When the mouse pointer mouses over a tab then the particular tab's image is shown. Till now its working well by keeping Visibility=true and style.visibility:hidden and on Mouse over event i am keep style.visibility:visible.
image is showing but its location is not in the correct position.I thought its all because of visibility true for remaining images.
can anyone suggest me to make visibility false .or to make images to be shown at particular location.
Thanks,
Rakesh.
try to use style
display:none
and
display:block
instead of visibility:hidden and visibility:visible
Maybe I am misunderstanding here, but this seems to be more of a css, javascript question than an asp/c# question. It would also be easier to formulate a useful answer if we had a bit of example code that clarified the question a little bit, but I suggest 2 possible solutions:
position these elements with absolute positioning based on the parent containers.
Add a visible wrapper div around the elements to keep the position the same.
I tried searching for this on Google, but to no avail.
Can someone point me to a good resource that explains the rendering and visibility rules for CSS ? Or if it is very simple, can someone please write it down here ?
To give you an example, let's say that I have 2 large divs, DIV_LARGE1, DIV_LARGE2, that are not contained within each other and a small div, DIV_SMALL. When DIV_SMALL is defined within DIV_LARGE1, I can see that part of it which falls inside DIV_LARGE1, but the area that is shared with DIV_LARGE2 gets hidden beneath DIV_LARGE2. I am displaying DIV_SMALL (by setting its display:inline) after the page has rendered (on some click), so it should not matter that DIV_LARGE2 comes after DIV_LARGE1 in the HTML code.
What takes precedence over what ? Since my smaller div has position:relative and both the other divs (DIV_LARGE*) have position:absolute, I can infer that absolute positioning takes precedence over relative if the div is not defined inside it. But is this correct ? What are the precise rules ?
Phelios is correct, the issue you're running into is related to the z-index property.
Here's a great article from SmashingMag that explains it in detail: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
For the tl;dr - positioned elements get stacked in the order they're placed in the html code, so your div_small inside the first large div is by default always going to be stacked "under" the second large div. You can fix this by setting the small div's z-index property in css.
I have a set width and the height is set to auto.
Each row is a div, inside is a div for each column. and there is a <p> tag inside the column divs where text should be.
The CSS involved is very basic, just some padding and set width/heights...
and float left.
Something I'm missing?
It's actually expected behavior for your code. You have a single "word" in your "cell", with no spaces in it. So browser doesn't know where to wrap and automatically extends the box. You should add word-wrap: break-word CSS rule to .orderHistoryTable selector (or to orderHistoryTable div.row1 if you want this behavior only on this cell)
http://jsfiddle.net/d2Amf/
Did you try setting the CSS overflow property?
http://www.quirksmode.org/css/overflow.html
I live and breath by the Clearfix method. It will solve many of your layout problems w/ divs. It might solve this issue you're having, or might not, but overall it's great to use when doing div heavy layouts. I use Jeff Starr's method from Perishable Press: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
I am designing a website for a client, and I am trying to get two side-by-side DIVs to adjust to 100% of their container. I've got the side-by-side done, but I can't get the right DIV to be the same height as the left one.
You can view the problem here: http://www.campusmomlaundry.com/
The "challenges" and "benefits" DIVs should be side-by-side and the same height, without manually specifying the height. How can I do this?
Your problem is that the outer div is sizing automatically by the inner content, which is sizing automatically by its content.
You have couple of options:
Use the background solution mentioned in the #R0MANARMY answer to create the visual ilusion of two equally tall columns.
Set the height of the two inner divs to be the same exact number (using px or em)
Set the height of the outer div to an exact number.
Play with the display attribute and try couple of different values like table-cell and so on. Keep in mind that this one is not going to work in some older browsers. (Not only IE, but some old Firefox and Chrome releases as well)
Use simple table with one row and two columns.
I realize that the last one is the most controversial of all. Yet it is a possible solution for your problem and there's no reason why you shouldn't at least evaluate.
([groan] please, please, nobody mention the words "semantic HTML"! there's no such thing in our universe.)
There's an article on A List Apart on solving a similar problem, you could probably use that as a reference: Faux Columns.
If it was me. I would solve this problem via javascript. Using jquery you could do...
$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});
That should do it. If your like the people I work with, and you don't like using Javascript for CSS problems. Then you are probably flat out of luck. Alot of the time, it is much faster just to use JQuery, then to use the "right way" using css. You could probably spend all day trying to get it to work with different combinations of styles.
Perhaps number of bullet points in the left DIV?
Have you tried: height: auto; or height: 100%;?