I have a container div, and it needs to be positioned as relative. Inside that div, I have a table. I want to display an element inside one of the table cells as absolute, relative to the containing cell, but it gets positioned relative to the container div (I think).
See this jsFiddle.
How can I set this up so that the element gets positioned relative to the td?
Make the TD position:relative as well. Absolute elements are always positioned relative to their nearest relative parent.
Since tables and table related elements can be the odd ducks of the HTML element world due to their unique behavior, it may be more reliable to simply add an inner wrapper DIV around all the contents of the TD, and make that DIV relative instead.
You can only position the div relative to it's TD parent if it's TD parent is also positioned (absolute or relative). In this case, since dealing with TDs, you want to just set it to position: relative.
See answer in this jsfiddle.
It will work if you make the td position: relative. See here: http://jsfiddle.net/u6WHH/6/
make the container and the cell relative then assign absolute to td.
Related
I am quite confused with this relative and absolute positioning when the parent or grand parent has a position values. can someone clear me out these two cases:
Case 1:
grandparent - absolute
parent - relative
child - absolute
Case 2:
grandparent - absolute
parent - relative
child - absolute
but here parent is independent of grandparent, like below:
<div class="grand-parent">
</div>
<div class="parent">
<div class="child">
</div>
</div>
Below is a fiddle which i have worked on:
https://jsfiddle.net/4KUWc/32/
Questions:
I don't see any difference between the two cases above. Should the
case 2, parent div not start after grand parent? Why is it taking
(0,0)
If relative has a parent of absolute, will it behave accordingly to
the absolute parent or is not dependent on it.
Can we have a relative children with absolute as parent?
position:absolute
...elements have their relational positioning attributes (i.e. top, bottom, right,...) calculated from their closest ancestor with a position value other than static (which is default). If no such ancestor exists, <body> will be used.
position:fixed
...elements have their relational positioning attributes calculated from their closest viewport (by default: <body>, but a 3d transformed element acts as viewport for its children - see Unfixing fixed elements with transforms).
Both of the above place the element, including all its children, out of the content flow of their parent. All subsequent elements in DOM will act like this element and its children do not exist in DOM.
position:relative
...elements have their relational positioning attributes calculated from the position they would normally occupy in their parents content flow if no relational positioning attribute was applied. Unlike fixed and absolute, relative position does not place the element out of its parent contents flow.
Simply, there is no magic happening. Just understand how each position work. Here's shortest summary I can think of:
All elements by default have position: static , which means they will stack on each other (or inside each other if they're nested).
If an element has display: none or has width: 0px and height: 0px then it will not take space, so other elements will just be rendered as the hidden element never existed.
The CSS attributes top + bottom + right + left + z-index are ignored if the element position is static (the default). To work correctly, the element must be positioned relative, absolute, or fixed.
static and relative are alike, except that relative may consider the attributes top + bottom + right + left + z-index.
relative is positioned relative to its parent position.
Element with position absolute or fixed are alike, with one difference: absolute will be positioned relatively to the body, while fixed will be positioned relatively the window (note #AndreiGheorghiu's answer about fixed position and 3D transform).
absolute element will be relative to the nearest parent with position other than static. If all its parents are static, it will be relative to the body.
I was working on a site and have a parent element with position:relative that has child elements with position:absolute. What's strange to me is that with the positions I mentioned, the child elements seem to still recognize their parent and have scope within it.
heres a fiddle to demonstrate what happens.
This actually ended up working to my advantage, but I'd like understand what happens to cause this.
Absolutely positioned elements are placed in relation to the first positioned parent element. It is acting as it should.
if you look at the definition of position: absolute then it will make more sense.
absolute position: The element is positioned relative to its first positioned (not static) ancestor element
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
I have a div which is positioned as relative and whose height is 38px inside this I have another div whose position is set as absolute and the top property is 38px and the left property is 0. But I can see that from the left its not aligned to the parent element rather it looks as I have set the left property to 1px which results in a kind of left 1px margin from the parent element.
So whats really happening?
I guess that's due to the fact that you cannot place child element upon the border of the parent element. so for example if your parent has border-width:5px then:
see? your child div starts exactly after 5px(the width of the border of your parent div), and since it is inside the parent div, it cannot just stand upon the border(sorry for the bad english)it doesnt matters whether you position your element in such a way that it appears outside the parent div, it is still gonna follow the parent-child positioning rule.
Solution:
you can either set:
left:-1px;
or
margin-left:-1px;
on your child element. Looks hacky but thats all we can do.hope it helps
Demo : http://jsfiddle.net/s4v89/1/
JSFiddle
How can I get the 'Tree' to be positioned at the top inside the second row?
I have read some sources on this, some claiming that fixed is positioned relative to its outer container, other relative to the browser window. On position:absolute, I've read that it's relative to the browser window, but w3schools claim that it's relative to the first positioned element. All of this is making my head a little fuzzy, and despite playing around with both properties I have not been able to really get my head around this.
position:fixed always refer to the browser window. A fixed positioned element won't change it's position when scrolling the browser window.
If you want a relatively positioned element inside another element, you must give the container (parent) element a position:relative;, and the element inside it a position:absolute;. This way the absolutely positioned element coordinates will be based on the parent (relatively positioned) element.
Also, when trying to use absolute and relative positioning for a layout, it's better not to use tables.
Update
The absolute positioned element will search through the DOM tree, looking for the nearest ancestor that is positioned as well. If it finds none, it will position itself relative to the browser window. – Justus Romijn
Update 2
just give position:relative; to the td containing the absolute positioned element, like this
http://jsfiddle.net/E2gYN/5/