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.
Related
I've been using ng-repeat to construct tables for a while now, and this is the first time I have this problem,
ng-repeat="users in [].constructor(10) track by $index"
basically all the elements generated by the ng-repeat get ignored by some css (borders of the container) and the DIVS below, which have position relative, ignore the newly generated elements, and position themselves just after the original element that gets repeated with ng-repeat.
why is that?
I used the ng-repeat in the same table, above for the rows, and I don't have this problem, any clue?
https://jsfiddle.net/buwgq14a/28/
here a fiddle with everything, you can see the last section, footer, is in the middle, because it positions itself just after the first element of the ng-repeat, while the rest gets ignored and doesnt even get the borders!
thank you so much
ok, solved by myself, stupid mistake, I was giving a set height of 35px to the container of the ng-repeat, instead of putting 'height: 35px' to the row container... after putting 'height:100%' it fixed everything –
The HTML below specifies a button and a div that have identical class and contents.
<div class="root"><!--
--><button class="outer"><div class="middle"><div class="inner">label</div></div></button><!--
--><div class="outer"><div class="middle"><div class="inner">label</div></div></div ><!--
--></div>
In this example, I have explicitly set every CSS property1 for the classes outer, middle, and inner2.
This means that both the button.outer and div.outer sub-trees of the DOM should have completely identical CSS settings. Presumably, as well, no CSS properties for these elements are getting their values from anywhere else besides the provided stylesheet.
As the example shows, the side-by-side button and div look quite different. Specifically, in the button, the label appears at the bottom of the element, whereas in the div it is vertically centered. (The label is centered horizontally in both cases. Also, note that all the classes have the setting vertical-align: middle.)
I have observed this difference with all the browsers I've tested so far (Chrome and Firefox).
Since there is no difference in the stylesheet settings for the button.outer and div.outer elements, and their descendants, I figure that the difference in their appearance is due to some CSS property with a value (such as auto or normal) that gets interpreted differently by the browser depending on the whether the context is a button or a div element.
My immediate goal here is to understand sufficiently well why the button and the div are being rendered differently so that I can adjust the CSS intelligently.
My longer term goal is to make CSS coding more predictable. Currently I find that my CSS is completely unstable due to gross inconsistencies like the one shown in the example.
My question is:
how can the difference in appearance between the button and the div be explained?
1 As reported by Chrome's devtool.
2 I took the vast majority of the values for these settings from Chrome's devtool's listings. The point was to ensure that both the button and the div elements had the same setting (whatever it may be) for each CSS property.
This is likely due to different meanings for the value of auto for the position of elements inside of a button. If you expand the size of a div, the content by default will be in the top-left corner. If you do the same for a button, the content will be centered horizontally and vertically.
Since the button's top and left values for auto is to be centered and not in the top left corner, you can reset top and left to always act like a typical div would. These are the properties to change on .middle:
.middle {
top: 0;
left: 0;
}
Here's the forked JSFiddle with those changes to .middle.
Different elements have different default settings. There is an enormous amount of CSS in your demos, and it's largely overkill and very hard to determine where exactly the differences in rendering are coming from.
Have you tried a CSS reset instead? These will resolve most of the discrepancies between elements and browsers, giving you a blank slate to add your own styles.
how can I determine the property (or properties) that account for the difference in appearance between the button and the div?
By clicking through them one by one and toggling them on and off in Dev Tools. If you turn off position:absolute on the middle class, you'll see what you're probably expecting in layout. I found this by clicking through all the properties in the Elements > Styles panel. See:
https://jsfiddle.net/vfdd9p8L/
This is probably a bug that you're encountering. Browsers have lots of them! By layering on so many styles at once, you're probably backing into a weird corner case with respect to the layout algorithms. To isolate the bug for help and/or reporting, try to create a reduced test case, which creates an unexpected discrepancy, but using the minimal number of elements and declarations.
(Also note that your fiddle is including jQuery CSS, which includes Normalize, which is a whole other layer of styling.)
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)
The best way to illustrate this question is with...a Fiddle! Before you visit the fiddle, notice there is text behind the grayest element, which is on top of a light gray element that has a border.
There is a main wrapping div (root), and two wrapping divs inside (wrap1 and wrap2). The problem here is that I need the content of wrap2 (highlight) to be behind the content of wrap1 (text), but in front of the background of the root.
This, however, must not change:
The HTML, the elements and wraps should be left untouched. Excluding the order of wrap1 and wrap2 inside root.
The highlight div must keep the absolute positioning.
Styling highlight with background-color is not an option, the existence of highlight is a must.
PS: the italics reference the id's of <div>s in the fiddle example, for whomever was too lazy to visit it.
I was able to display the text in front of the highlight by adding a z-index to text. (Adding the z-index to wrap1 also works.) The trick is to remember that z-index doesn't apply to statically-positioned elements, so you need to give the same div position: relative.
#text {
position: relative;
z-index: 1000;
}
(Large z-index because I've been bitten by IE not respecting low values in the past. May or may not still be an issue. ;-)
z-index can be difficult to grasp. I think somebody already answered your question, but if you want to learn more how they work, this is a pretty comprehensive guide:
http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/
And also, here is a link where you can try out different z-index and how they are affected by different position properties (the main reason for difficulty)
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
#wrap1{position:absolute;z-index:2;}
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/