I asked an earlier question about absolute and relative div positioning, but I would like to try to understand (for sure) the role of float in this context.
My main question is: how does float relate to absolute and relative div positioning?
Are the following statements correct (yes/no):
float right (or left) will try to stack all div one after the other starting from right (or left). If there is not enough space (width issue), the divs are displayed at the next 'line' (from top to bottom).
float does not impact absolute div ever, absolute overrides float
relative div are positioned relatively to the first enclosing relative div (absolute divs are ignored)
float right (or left) on a div will first compute what would be the natural position of a relative div, then add any top-left offset to compute the final position.
Thanks.
Float left or right will site next to each other inline unless the width are 100% then they would sit under neath each other:
Hope this makes sense and is what you are looking for.
http://www.barelyfitz.com/screencast/html-training/css/positioning/ 7,8 and 9
With CSS float, an element can be pushed to the left or right,
allowing other elements to wrap around it.
The statements you provided 'appear' correct
An absolutely positioned division is only relevant to the first ancestor element whose position is not static, which is how it determines where it ends up via it's top, right, bottom, left properties. An absolutely positioned element cannot be floated because it has been removed from the flow of the document.
I'm confused about your point #3, which doesn't make much sense. A relative division would render the division as it would normally appear in the document. It can then be moved around with its top, left, bottom, right properties while still maintaining the same position it would have used had it not been moved anywhere. A relatively positioned element can be floated like any normal element and will not affect where other floated elements end up when you move it around.
Related
This question already has answers here:
Why can you clear floating elements but not absolutely positioned elements?
(2 answers)
Closed 6 years ago.
Both floated and absolutely positioned elements are taken out of the document flow. Then why does clearfix hack only work on floating elements not upon absolutely positioned elements?
There is a common misconception that floats are removed permanently from the document flow.
This is not the case, floated element are removed from their standard position in the flow and shifted as far as possible to the left or to the right on their current line, depending on the specified floating direction.
W3 Spec
A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.
Floated elements affect the elements around them, absolutely positioned elements do not.
W3 Spec on Absolute Positioning
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings).
Notice the difference?
So a clearfix (or clearance) only affects floated elements. A clearfix is not used to clear floating elements, it's used to contain floating elements inside another element.
There's a great article on CSS-Tricks which explains All About Floats and covers the differences between them and positioning.
FLOAT :
When you float an element, The element is not taken out.
Float does not removes an element from the document’s flow.
Position ABSOLUTE :
When you position an element the element is take out (Placed above other elements).
Absolute positioning removes an element from the document’s flow. The element given absolute positioning will no longer affect the layout of other elements in the document.
This is the best example you can understand easily : Check this
Having problems executing a complex layout with minimal usage of relative and absolute positioning.
Here's my layout:
All my elements are floating left sitting side by side with only a single problem: the border img needs to bleed down into the next row. How can I do that while preventing the elements in the 2nd row (the CTA elements) from scooting down below the lower margin of border img?
This is what happens if I set the height of border img
For clarification:
The dom is such that border img is between main_sidebar and CTA_top_container.
main_side_image
main_heading_container
main_sidebar
border_img
CTA_top_container
CTA_Button_relative
Closing thoughts:
I have some ideas, like floating right the border img as a div (or susy's last) and setting background-image as 60% width and positioned on the left of the div or nesting an absolute positioned img inside of a relative container to nudge it over to the left, but i am afraid of destroying the fluidity of the layout (it's inside of a susy fluid grid).
Any thoughts?
If you float the border_img right instead of left (with some right margin to push it off the edge), everything else should be able to flow around it.
You might also want to use a grid with more columns. If you're always having to split columns into fractions, it's not really the right grid for the job.
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/
What is the difference between using top and left properties and top and left margins?
I know top and left are usually used in position:absolute situation but I'm still wondering if there is any major difference.
ex:
position:absolute;
top:5px;
left:5px;
-vs-
margin-top:5px;
margin-left:5px;
Well, the main difference is that absolutely positioned elements are pulled out of the content flow.
But also with relatively positioned elements, the surrounding content may become obfuscated.
Margins on the other hand are added to the element's size while the surrounding content flows accordingly.
See this sample fiddle with some differences.
Surely there are situations where both deliver the same results, but under normal conditions, these two aproaches aren't simply exchangeable nor comparable.
A There's a semantic difference. Box offsets like top specify how far a box's margin edge (dotted edges in the image below) is offset from a reference edge (For absolutely positioned elements, that's the top edge of the box's containing block). Margin properties like margin-top specify the width of the margin area of a box (The distance TM between the dotted edge and and solid edge in the image below).
B top and left apply only to positioned elements (elements with position set to anything other than static) while margin-top and margin-left apply to all elements except elements with table display types other than table-caption, table and inline-table.
Margin describes the space between your box and adjacent boxes. Boxes that are positioned relatively (i.e. that are part of the normal flow) will keep the sufficient space between them that each one's "margin" requirements are met (called "margin collapsing").
top and left on the other hand are positional attributes that specify where your box is located; for absolutely positioned boxes the values are taken relative to the nearest containing box which is itself absolutely positioned. The top/left/bottom/right attributes specify the location of the respective edge of your box including its margin.
In short, the two are entirely different concepts. For normally flowed boxes you should use margin to control the spacing between neighbouring boxes.