I'm using a javascript library to create modal windows in my application.
I'm having a problem where there are 2 divs, A and B (A is parent of B) both position:fixed. Div A has z-index:1 and the Div B z-index:3.
I want another div, C, also with fixed position but external to these two, be in between them (with z-index:2), but it ends up on top of all. Apparently the child div(B) z-index does not matter at all and always stays on bottom of div C..
I made a JSBIN with the sample here:
http://jsbin.com/koyasu/edit?html,css,output
This is just how z-index works. The parent div sets the layer for it and all of its children. Children who set a z-index will only be changing their layer inside that parent.
You'll have to restructure your DOM for this one, I'm afraid.
A fixed position always refers to the viewport, so you might as well take DIV "B" out of "A", getting three fixed elements on the same level. Then z-index can be applied more relieable.
Related
What I have - parent div with several (5) child divs. And few child divs contain text, hence they may change their side and move others inside parent div (in certain volume).
But I need that 4th of child div stays at his place all the time (see picture attached).
I tried to define its position using position:relative for parent and position:absolute for needed div (let's call him - "Object"). But in this situation when the height of other child divs, locating higher than Object, changes, one of them may stay on the content of the "Object" (over it).
Moreover, I found that with position:absolute "Object" started to ignore padding of parent div!
As I see - I need to fix somehow the position of Object in relation with top border of parent div. BUT - margin-top for 4th div doesn't work for it, as it moves the child div #3 above.
I am new to CSS and will be glad if anyone may help me.
// doesn't work as needed:
div#father {position: relative;}
div#son5 {position: absolute;}
initial draft code for parent and child divs at Jfiddle https://jsfiddle.net/741rzafq/2/
If you want to keep the element fixed at its position, you can use position:fixed; for that element. It will remain at its position even if you scroll the page.
I am having two div's next to each other, first one will be rendered on Ajax call and will be filled with more content, so its content height is not known.
I want the second div to always appear at the bottom of first div regardless of the first div's height, I mean: after the Ajax call rendering completes, the second div should be positioned immediately under the first div.
Will something like this work?
Note: I am not applying the below CSS. I gave it as an example.
.seconddiv
{
position: relative;
top: (top of first + height of first);
}
you don't have to set anything.
this is the default behavior of block elements: to be stacked one after each other.
sometimes, less is more.
Here is a Working Snippet for you to try. [notice the empty CSS panel except outlining, that is for you to see that the positioning works]
Try this, it worked for me
keep the position of the dynamically generating div as static
position:static
Now give the position property for next div as absolute
position:absolute
and then give your "top" or "margin-top" whichever you are trying with
I have a table with some data but I want to use one cell for displaying more divs. Each of divs has different exact width and position from the left.
I tried it with position:relative but position of each next div depends on the divs on the left and I don't want that I want each div in that cell to be exactly x pixels from left of the cell border.
I also tried position:absolute but this does go really to the <html> tag as they write here http://www.w3schools.com/css/css_positioning.asp:
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>
Now I'm not sure how to solve my problem.
My example: http://jsfiddle.net/6wSAJ/465/
(Made from accepted answer from here: Relative positioning of two divs)
Edit: I guess I forgot to mention that I need it to work in IE8.
Edit 2: http://jsfiddle.net/6wSAJ/468/ The problem I was dealing with is that if I set the cell relative it completely ruins my real problem table so I have to make divs with relative position around the divs I want to be positioned absolutely. I didn't do that at first cause I always want to try to style the elements I have and add new ones only if really necessary.
You should make the wrapping divs a relative position so the absolute position will apply on inner elements:
position: relative;
jsFiddle Demo
Note that you can't give a table-cell a relative position for it's not standardized and will work unexpectedly.
For further reading:
position - CSS | MDN
Learn CSS Positioning in Ten Steps
How to remove padding from div after replacing another div using z-index propriety.
This is basic HTML structure:
a) main container, height:auto
b) div that should be overflowed
c) div that overflows div b)
After moving c) div up for 200px, I get empty space. Main container has auto height propriety, but it remains the same size.
My question is how do you guys remove extra space after moving divs up with position/z-index proprieties
You can use a negative margin instead of positioning div#c. See this demo.
A negative margin doesn't alter the stacking but is able to put the div#c over div#b. Don't forget the phenomenon of the collapsing margins.
In some cases, you can arrive at the same conclustion as far as the painting is concerned (doesn't matter what techinque you take). But the route leads along important css concepts:
By means of top|right|bottom|left an offset is carried out after div#c has taken up room. Therefore, a following element (or in your case: div#a) is arranged in such a way so if it were not first been positioned.
positioning can create a new stacking context (in conjunction with a z-index != auto)
an element that is positioned relative creates a containing block (a frame of reference for descendants that are positioned absolute)
Relative positioning is more or less consciously used as a bugfix for IE.
try this replace top:-30px; with margin-top:-30px;
http://jsfiddle.net/NqphG/1/
I have a CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..
Here is an example of what I'm going for, how can I stop it from pushing the content down?
Thanks.
Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.
Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).
Did you make sure the tooltip css position value it absolute? (or at least not static).