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/
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.
If the child is position:absolute, the parent is overflow:hidden, and the parent is position:static, the child still overflows:
<div style="overflow:hidden;height:100px;border:2px solid red;">
<div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
</div>
</div>
If the parent has a position other than static, the child no longer overflows:
<div style="overflow:hidden;height:100px;border:2px solid red;position:relative;">
<div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
</div>
</div>
Why does this occur? What is this behavior called?
I'm using Chrome, is this behavior consistent across browsers?
That's because the spec defines overflow as
This property specifies whether content of a block container element
is clipped when it overflows the element's box. It affects the
clipping of all of the element's content except any descendant
elements (and their respective content and descendants) whose
containing block is the viewport or an ancestor of the element.
The absolutely positioned element is a descendant whose containing block is established by an ancestor of the element with overflow: hidden, as explained in Definition of "containing block"
If the element has position: absolute, the containing block is
established by the nearest ancestor with a position of absolute,
relative or fixed
Therefore the absolutely positioned element is not affected by that overflow: hidden.
If the parent were positioned, it would be the containing block of the absolutely positioned element, and then overflow: hidden would affect it.
First of all, take a close look at the MDN Documentation CSS Position.
So how does this relate to your question? let's first analyze position: absolute:
absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
As far as your case goes, the positioned ancestor div element does not have any specified position attribute to it.
Therefore, it assumes the default position: static which literally specifies nothing other than the standard position of the element in the page. Check it out:
static:
This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.
In other words, the child will not be positioned relative to its parent. The weird behavior is because you expect the parent div to be positioned when is not positioned at all. It falls to ask: what is the nearest positioned parent then? The answer is to go up on the DOM tree and find it, logically since you have nothing in your example but your two div, the nearest parent will be webpage document itself.
So, how can you fix this? By adding (for example) position: relative to the parent div element.
EDIT: Overflow and Position properties:
By using overflow, you are typically trying to do one (or all) of the following: clip content, render a scroll bar, display any overflown content in a particular way. I gather your goal however is to have the child div not overflow the parent div. The question of how to avoid this overflow can take you to a place you do not want to go.
So by narrowing down what overflow is all about: (long story short) it is about controlling/modifying the look and feel of the content of what is inside a particular HTML element. Keep in mind, the content, not the element itself.
In your case, you may perceive the child element of your parent div as being the content of the parent div. Rather, what you actually see is the contents of the child element. The positioning of the parent and child with respect to each other is thus not controlled by the overflow property, but by the position property.
Is this consistent across browsers?:
Since CSS 2.1, the overflow (visible | hidden | scroll | auto) and position (static | relative | absolute) have been supported in all major browsers. Any discrepancies would occur when you extend on the overflow since certain of its attributes are not widely supported. See here for reference: Can I Use: Overflow (also scroll to the bottom for the CSS 2.1 reference).
Do you have any questions about this? Ask in the comments below.
overflow property is not inherited anyhow: http://www.w3schools.com/cssref/pr_pos_overflow.asp
So in your first case it is understandable it is not working, since with static position the browsers put it in the order it reads and overlooks collisions.
In your second case absolute positioning actually sets a space for the container div and then puts the second div into it - thus makes the overflow hidden.
You can imagine it this way: in your first case you created two divs which are not related to each other but positioned on each other in the second case you created a container and forced another div into it by setting the container's overflow to hidden.
Hope it helped easy understanding,
Andrew
The relative value for the position property is very similar to that of the static value. The primary difference is that the relative value accepts the box offset properties top, right, bottom, and left. These box offset properties allow the element to be precisely positioned, shifting the element from its default position in any direction
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.
How can I make a child div the width of the parent div when the child has position:absolute and some padding?
Here's the example. I want the child to not extend past the parent.
http://jsfiddle.net/usv9R/
http://jsfiddle.net/usv9R/1/
If you manually set top/left/right/bottom, without setting the width explicitly, it will expand to the parent. I've set this to 12px for all which gives the padding effect
Note the position:relative; on the parent, otherwise the child will be absolute to the parent's parent and so on.
This has one unfortunately consequences. One, which you may already be aware of, the parent won't expand to fit the child.
Also, it just occurred to me that you maybe wanted the padding on the child instead? You can do that just fine, but be forewarned that given the above limitation, the parent won't necessarily encompass the child with too much vertical padding.
Add position:relative to the parent, so that the child uses it for relative sizes rather than the page.
Then add left:0px;right:0px; to the child, and remove the width so it calculates it itself.
like this: http://jsfiddle.net/usv9R/10/
Is it possible to create an absolutely positioned element whose top/left is set to where it would've been had it been static, and whose bottom/right is set to 0px, 0px.
Thank you
it is possible but under certain conditions only. The element has to be inside a container element whose dimensions(effective width and height) should be same as the element container(a simple javascript can do that trick) and it should have {position: relative}.Make this container position itself as it's child would have been.That's it.