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;}
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 continuously find myself having problems with elements floated right in IE7.
I have read many Stack Overflow questions which are similar to this one but there doesn't seem to be any consistently clean CSS answers.
What I mean by this is is I want to see answers which DO NOT change the HTML. E.g:
Put the floated element first
Add a 'clear: both' div after the floated element.
I understand that sometimes the floated element doesn't account for its parents height and therefore sometimes fails to contain it properly. Occasionally I find myself 'adding layout' to an element with zoom: 1 which sometimes fixes it. Other times I find myself messing about in a conditional IE7 style-sheet which isn't the best fix in my opinion.
Note: What I mean by 'having layout' - http://www.satzansatz.de/cssd/onhavinglayout.html
I have also read other answers to do with using relative and absolute positioning (parent div and child div respectively). This pulls it up but often affects surrounding divs.
I would be happy to add a bounty to this question if someone can give an in depth explain as to the reasons this happens and a detailed discussion of the various fixes, IDEALLY CSS ONLY!
Many thanks!
EDIT
The most common problem I encounter is when I have something like this:
Left Sidebar - Main - Right Sidebar
Right will often drop when floated. Ideally this should be in the format Left - Right - Main, but I continuously find myself styling developers work (Drupal mainly) where this is the case and it is too much hassle to get them to change their work. Make sense? Because I'm styling developers work they never put the clear block in too (which personally I think is horrible and dirty anyways!)
Introduction
Your title indicates a desire to see a fix for the float: right drop bug, but your text implies some broader scope desire to see solutions to “problems with elements floated right in IE7.” There are many general problems with floated elements (right or left) in that browser. Even though one may question whether support of the IE7 browser is worthy of much attention any more, it undoubtedly will remain so for some people for some time. Therefore, I’m going to take the opportunity here to address numerous issues at once regarding floats in that browser. Note that many experiments and references below come from an excellent resource: http://www.brunildo.org/test/index.html.
CSS for the Containing Element
For a containing parent to the floated element the following css should be set:
.container {
overflow: auto; /* forces clearing of the child float */
zoom: 1; /* give it layout (this can be some other css that does likewise) */
}
Making sure it hasLayout is important to prevent types of margin and padding errors, a type of peek-a-boo bug, and allowing the overflow to clear. For a sequence of floats, some html may need changing if padding on the container is desired to work properly.
With regards to one “drop” issue with a float: right, you may want to avoid setting an explicit height or max-height on the container. A min-height is okay. Setting a height and then having the float be taller than the container makes IE7 not behave with following elements. There is no pure css solution that I have found noted.
If the container is itself position: absolute there can be issues with positioning a float that may require that float itself to be set to position: absolute instead of being floated.
References:
For overflow to clear -- http://www.quirksmode.org/css/clearing.html
Margins -- http://www.brunildo.org/test/IEFloatAndMargins.html
Peek-a-boo -- http://www.brunildo.org/test/iew_boo.html and http://www.brunildo.org/test/iew_boo3.html
Float sequence padding -- http://www.brunildo.org/test/IEmfloa.html
Avoiding height -- http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/, http://www.brunildo.org/test/fenc7.html (and his similar problem link on that page).
Container is absolute -- Floating Too Far Right!
CSS for the Floated Child
For a the floated child element, the css (besides float: right) to set depends on two things:
Absolute Container
Again, as noted above, a containing parent that is absolute may require a change in how the child is handled.
Float is Also a Clearing Element
If the float is also going to have a clear set on it, then there are numerous issues that can arise depending totally upon the html and css of the elements around it. There is no single canonical fix, so look at the references below.
References:
Container is absolute -- Floating Too Far Right!
Also having clear -- http://www.brunildo.org/test/IEWfc.html, http://www.brunildo.org/test/IEWfc2.html, http://www.brunildo.org/test/IEWfc3.html
CSS for Child Elements of Container Before the Float
If the float: right follows an element in the html structure that should be to its left (and not above it), then that preceding element(s) must be float: left.
CSS for Child Elements of Container After the Float
A Clear Element
For an element after the float that has clear set, then if it has padding and background-color, make sure it also hasLayout to avoid a doubling of the padding; also this prevents extra space above the clear due to container padding, and avoids other margin issues.
References:
For padding -- http://www.brunildo.org/test/IEClearPadding.html and http://www.brunildo.org/test/IEFloatClearPadding.html
For margins -- http://www.brunildo.org/test/Op7_margins_float.html (look down the page for IE7)
A Paragraph Before a Clear Element
Having a paragraph with a margin-bottom and shorter in height than the float, located between the floated element and a clearing element, can create an extra gap between the clear and the float equal to that margin. There is no known pure css fix other than giving the paragraph a zero bottom margin (which may not be acceptable if the paragraph may go taller than the float).
Reference:
Paragraph following -- http://www.brunildo.org/test/IEFloatClearMargin.html
Conclusion
I cannot guarantee I have addressed every issue that may occur with a right floated object, but certainly many major ones are covered. As to “why” these things happen, it is all “bugginess` in IE7.
Have you tried to use the clearfix solution to collapsing divs? There are variations on this and there is a newer version but I don't have the url to hand, but this is standard clearfix css which you add to the parent element that is collapsing and causing issues with floated elements http://www.webtoolkit.info/css-clearfix.html. Chris Coyer has a better version here http://css-tricks.com/snippets/css/clear-fix/.
You say "I understand that sometimes the floated element doesn't account for its parents height and therefore sometimes fails to contain it properly" this is kind of true, the parent will collapse if all child elements are floated. This is due to the elements being removed from the normal flow, when this occurs the parent div is unable to calculate its height and collapses as if there isn't anything inside of the div.
But without seeing the page and the issue you are having I can only estimate that the issue is due to IE6-IE7's haslayout property which is really annoying, they sorted it out from version 8 upwards but it does add extra development time to your build.
But in most situations the clearfix solution is best as it doesn't add extra markup to the page such as
<div style="clear: both"></div>
this is old and out of date and should be avoided.
I hope this helps you, if you need any more information or I have not answered the question just ask.
We have been using the clearfix solution for years now.
.cf:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.cf { display: inline-block; }
html[xmlns] .cf { display: block; }
* html .cf { height: 1%; }
This is a simple CSS class which, ideally, has to be applied to a container that has any child float elements. Since you're restrictive about not changing the HTML at all, you can either:
replace all occurrences of .cf with your own div's selector [or]
use JS to apply the class (which is bad because users will see a broken layout a few seconds until the page loads completely) [or]
use PHP ob_start() + regex to apply the class [or]
just go vintage and rewrite everything using tables (as we used to do in the `90s)
It's simple:
Where you have float:right, add *clear:left.
Or where you have float:left, add *clear:right.
* for IE7-
Or for validation
*+html .class{clear:left/right}
I know it's been a year since this was posted, but I found a solution that I like for this. The gist is using 'expression' tag in your CSS for IE7 only to move the floated element to be the first element of the parent in the DOM. It will be semantically correct for all other browsers, but for IE7 we modify the DOM to move the floated element.
In my case, I have:
<div>
<h1></h1>...<p>any other content...</p>
<small class="pull-right"></small>
</div>
In my CSS for pull-right, I use:
.pull-right {
float:right;
*zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}
The result is that IE7 moves my <small> to be the first element of <div> but all other browsers leave the markup alone.
This might not work for everyone. Technically, it is modifying the markup but only in the DOM for IE7 and it's also a javascript solution.
Also, I understand there may be some performance issues with expression (it's slow), so perhaps it's not ideal there are a lot of floats like this. In my case, it worked well and allowed me to keep semantically correct HTML.
I've looked through other posts regarding CSS floats, but have not yet found an answer.
I have several div with same width (1/3 of screen). They are all set to float left. When one is longer than the others, it pushes the following blocks down.
I've made an example which you can see at http://apsam.dk/misc/float-pushdown-problem/index.php (the yellow div is pushed down by the blue div).
If I missed the answer in a post, please point me to it. I've looked throug alot.
EDIT to clarify. The question is: How to avoid that the yellow div gets pushed down.
To start a new line, please enter a div with the clear: both; attribute.
See my answer on another post here, which shows an example:
Link
Floats don't "jigsaw puzzle" together like that. Each of your floats has a height, that height is seen and honored. You can't get .yellow to ignore the height of .blue, especially in the same container. You could use positioning to move .yellow up.
Demo here
Or, you could use another div and treat it as your left column and have it contain the green and yellow divs.
Demo here
So I'm using the OOCSS media module and I'm putting a link inside of it and the last line of the link is being cut off.
To explain for anyone who doesn't know about the framework, it's simple to explain: imagine an element with overflow: hidden, and a link inside that element. That's ALL.
If I put a link inside of this element with overflow: hidden, the last text-decoration line of the link is cut off thanks to overflow: hidden. Without having to resort to padding & margin (and hopefully floats) is there anyway to compensate for that last line being cut off? Chrome seems to get this right, not sure though.
Actually there was another question very similar to this recently, you can see my answer there: Html anchor height issue with unitless line heights
So I don't think there's a solution to your question, but I wanted to note that while Chrome gets it right for overflow hidden, when you use overflow auto it's actually a problem as you'll see in that post.
try to set the line height on the text
line-height:1.5;
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?