Hy,
I read on the web that absolutely positioned elements have no height. Can someone explain this in a simple way and possible illustrate it with an example.
I think you're a bit confused. You probably heard that elements which contain only absolutely positioned elements have no height. That makes more sense.
An absolutely positioned element, like any element, would have the height of it's content, unless specified otherwise with height or min-height.
An element containing only absolutely (or floated) positioned elements have no height, because their content (a.k.a. the positioned elements) are taken out of the document's flow. Which means, they aren't rendered along the render tree of the document, where inline elements stack horizontally, and block elements are stacked vertically, but are rendered on an absolute position, relative to the nearest positioned ancestor. Because of that, their size doesn't count towards the parent's height.
Related
I got a DIV in my HTML-Markup, which is positioned relative. The DIVs inside this container are absolute.
this destroys the complete layout, because the following HTML-Elements are now positioned wrong, the (above) DIV which is relative, overflows them...
but why? How can I fix it?
Once you position a container with :relative, everything inside it will be positioned in relation to that. The position:absolute pulls the child elements out of the flow of the page an positions them at the top of the container with position:relative.
Thus, once you have elements with position:relative, you will want to also add rules to move and position the child elements. Consider using left: and top: or right: and bottom to position your :absolute child elements.
Alternatively, you might try to position the child elements with :relative as well, if you don't want them pulled out of the flow of the page.
Do you have code to look at, or a jsfiddle? Otherwise it's difficult to know what's going on and to suggest a fix.
If your relatively-positioned element only contains absolutely-positioned elements, you need to give it a height setting, otherwise it will have zero height (the absolutely-positioned elements won't be counted for auto height), and therefore probably cause some overlapping with subsequent elements.
Can you float elements that are positioned in any way? Or do floated elements have to be static? For example, is it possible to float elements which are positioned relatively?
Float and position are two different things, although they do influence each other. Floats have zero impact on elements which are positioned absolutely or fixed. Floats only have an impact on elements which are positioned statically (Default) or relatively.
Much of this is dictated by a single subsection within the spec. In particular if you're only concerned about how the position property interacts with the float property, then that subsection says that
you cannot float an element that is absolutely positioned (either position: absolute or position: fixed), but
you can float an element that is either relatively positioned or static (i.e. non-positioned).
In both cases, the position property will take effect as normal, but the float property will not have any effect on an absolutely positioned element. This means that an absolutely positioned element will remain in its absolute position, and a relatively positioned element can still be shifted relative to where it would originally have been located, taking the float property into account (as well as acting as a containing block for other positioned elements).
Am a right to conclude that a CSS margin (e.g. margin-left) influences the final position of an absolute postioned element? It seems a negative margin-left pulls it to the left (of it's absolute postion), a positive value to the right (of it's absolute postion).
Can someone explain me more about the combination absolute positioned elements and margins?
Thanks.
Correct. Margins influence where the edges of an absolutely positioned element begin.
Lets understand it this way:
When you have an statically-positioned element, the element is part of the normal flow of the document. Hence, any margins applied on it are considered 'with respect to its surrounding elements'.
When you have an relatively-positioned element, the element is still part of the normal flow of the document. Hence, any margins applied on it are still considered 'with respect to its surrounding elements'.
BUT,
When you have an absolutely-positioned element, the element is taken out of the normal flow of the document. This element's positioning is now dictated by the first parent container that is not statically positioned (or the top level body element as a fallback). Hence, when you apply margin, the parent container is taken as the 'surrounding element' and the margin in calculated with 'respect to it'.
Hope this helps.
In many places I have put elmeents nested in other elements. I can't deduce when a child element causes the parent element to expand. I don't have any code to post as this is a general conceptual question so that I can design as needed.
The first thing that you should understand is the CSS Box Model. That will help you understand how properties of an element cause it to have the size and dimensions that it has. Another good resource is here.
To answer your main question in the most simple manner (and being very general):
Block level elements take up as much width as possible (obeying their CSS width rule). Their height is dependent on their content and the CSS height property.
Elements like div, p, and ul are all block.
These will generally cause your parent element to expand.
Inline level elements will continue to flow together in a line, filling up only as much width and height as necessary.
Elements like span, em, strong are all inline.
These will cause your parent element to expand only when there are enough of them on the same line to warrant another line.
There are many ways to tweak the display of elements with CSS.
Get firebug for firefox. You can browse the DOM (the HTML structure of the page) and it will highlight elements according to how the "browser's eye" sees them (versus how they look aesthetically).
A few general rules of thumb:
Children will expand their parent's height as long as they're not floated or absolutely positioned, but...
You can "clear" a series of floated images http://www.quirksmode.org/css/clearing.html to make the parent element expand
If you use top positioning for a relatively positioned child element, the browser will still see that element in the exact same place. In other words the height of the parent element will stay the same regardless of where the child is relatively positioned to.
Using positive or negative margins on a child that is display: block will add or subtract height from its parent
I'm using the flexible box layout successfully but have a need to put an element positioned absolutely inside one of the boxes.
I've read http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#flex and in particular: Flexibility only applies to elements in normal flow. As absolute and fixed positioned elements are not in flow, any flexibility or flexgroup specified on them is ignored.
The specific use is to embed Google Maps, which has DIVs positioned abolutely and is more or less out of my control. The end result is that the DIV becomes positioned relative to the first non-box element that contains my flexible box layout instead of the box element I put it in. I'm assuming that this is because it was the last element with a real position.
I understand why this is happening, but does anyone know of workaround to put absolutely positioned elements inside a flexible box element such that the absolutely positioned element's position is relative to the flexible box element. I think that makes sense.
O.
I think the only work-around is using an <iframe> - it can be positioned using flexible box layout while its contents (Google Maps) use absolute positioning.