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.
Related
This question already has answers here:
When do we use "position:relative" in CSS? [closed]
(3 answers)
What is position:relative useful for?
(5 answers)
Why doesn't CSS absolute work with a static parent?
(2 answers)
Closed 26 days ago.
I have a problem with this i cant understand what is the purpose and qhat will happen if we do it.
I did try it but i didnt understand it.
You have to imagine it a bit like in the coordinate system. What is positioned absolutely works like in a typesetting or illustration programme. The coordinate system of an absolutely positioned box is the HTML document. An asbsolutely positioned block is not interested in the other elements of the page and the rest of the page ignores the block completely. So all other content that is not also absolutely positioned runs behind or in front of the box. An absolutely positioned block always needs a width and a height.
The coordinate system for the relatively positioned block is the position of the block in the content of the page (for an absolutely positioned block, the HTML document, not the position in the page). This is what is relative about relative positioning.
If the block is the first element in the document, there will be no difference to the absolutely positioned box. But if elements appear before the relative block, the block slides down with the contents.
What is behind the box in the HTML document will very well take care of the box and appear behind it. So far, so easy. But now it gets interesting.
Relative positioning becomes interesting when absolutely positioned elements lie in a relatively positioned block:
If an absolutely positioned element lies in a block with position:relative, this block becomes its coordinate system. Its coordinates top, right, bottom and left refer to the relatively positioned block.
So you can summarise:
Absolute positioning is suitable for fixed size content (e.g. images in a slideshow).
A relatively positioned block is a great container for absolutely positioned elements that are animated via CSS or Javascript (e.g. expanding boxes for navigation or tabs or slideshows at the top of the page).
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.
I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.
Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.
Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).
Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being
obscured.
EDIT: i.e. there is no property in CSS to turn an interactive state on or off.
UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.
I am creating a website here. In the HTML I have two lines:
<span class="header_text">Trapped in payday loans?</span>
<span class="header_text2">We can help you!</span>
The class .header_text and .header_text2 are defined in css.css with the attribute position: absolute.
Would it be more professional if I changed CSS position from absolute to relative?
How do I change position from absolute to relative? When I do so the text appears in wrong parts of the page.
You change it for functionality - neither is more professional.
position: relative. Though it will probably appear in wrong parts of page because its offsets no longer apply.
It depends what you want to achieve, there is no more professional, both values serve their purpose but they are different. You cannot just change one for the other.
But if you change absolute for relative, most likely you have to place the elements in question somewhere else in your HTML to achieve the same effect (if even possible).
For completeness:
relative
Lay out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
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.
The biggest difference is that elements positioned with absolute are taken out of the normal page flow (that is why it is said do not leave space).
Always stick to absolute, relative is not very professional and normally dumb people use this just to show off they can use odd layout to impress others.
what is the containing block of an absolutely positioned element? it seems the rule can be a bit complicated...
the spec should be here:
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
i want to verify if the following is true:
for simplicity, assume the containing block is a block element (not inline element)...
1) if the absolute positioned element has a closest ancestor that is positioned "non static" (relative, fixed, or absolute), then that ancestor is the containing block. the absolute positioned element is relative to it.
2) if there is no such ancestor, then the viewport is the containing block, and so the absolute positioned element is relative to the viewport.
no matter what the containing block is above, the width:100% or n% and height:100% or n% are both relative to the containing block.
that's why a
<div style="position:absolute;width:100%;height:100%;background:green"></div>
right under <body> will cover up the whole viewport exactly -- no more, no less.
we could also use position: fixed, except IE 6 doesn't support it... and so the poor programmer need to use position: absolute instead... (well, not a big deal)
Is that an accurate description of an absolute positioned element? If so, i think IE 6 and above, FF, Safari, Chrome all follow this behavior accurately?
You are correct. The containing block is the last positioned element. so if you want to explicitly set the container then give it position:relative. Most browsers get this right. CSS doesn't really have a 'viewport', I think the top is the HTML element though don't hold me to that. IE prior to 7 had an unnamed element above HTML though.
Summary:
position: relative
Does nothing except set the positioning context for all the elements contained within it. You can then position: absolute any element it contains by setting (typically one or two) values from the possible top, right, bottom or left.
If you give an element with position: relative a top, right, bottom or left value, it will shift position accordingly but leave a blank space where it would be by default. In other words, it remains within the document flow but offset.
position: absolute
To position something absolutely, you need to ask 'absolutely, but relative to which containing element'? It will either be the entire body (the default) or some other element on the page that is already positioned (usually with relative or absolute - fixed is also useful and supported in IE 7 but see this bug). It is then taken out of the document flow - other elements might appear beneath it, but won't flow around it. If it appears behind another element, you need to set the z-index property to move it in front.
A common solution is to have a centred container (margin: 0 auto) with position: relative within which other items are placed with position: absolute.
Finally, I like this little interactive CSS positioning demo.