Menu
Why Float is better than position:relative and absolute while we can make layout quickly with position? and in this recession time, time is very important.
when we make 2-col, 3-col or multi-col layout and then position other elements in layout divs.
Most of the world favor in Float . Why Float is better than position:relative and position:absolute to give position any element in <body> and other nested elements?
If using position: to layout a page/design, we can create a container div which is set to position:relative, allowing header, content and nav divs inside the container div to be set to position:relative, allowing these divs to be positioned relative to the container div.
and with positioning we can keep "maincontent" first and "leftsidebar" second in source order which is good for SEO.
please explain things with example demo page.
783
Relative : your element is positioned to its last sibling with a relative position. Float : for instance if it's left, your element will move as far as it can to the left (depending on other element and its width, the elements before won't be affected, the elements after will flow around it. Ref:
If you assign a margin to an element that’s floating, text will flow around it, instead of occupying the same space. This doesn’t work quite the same with absolute positions. They appear at the exact Float is used to position the element to left or right in CSS. Absolute is used to position the element.
Floats and positioning are two different ways to determine where elements will be placed on the page. Floats are simple to use but not very specific; positioning is accurate down to the pixel, in theory, but the rules are more complicated and browser bugs are more annoying.
Relative Positioning Relative positioning uses the same four positioning properties as absolute positioning, but instead of basing the position of the element upon its closest non-statically positioned ancestor, it starts from where the element would be if it were still in the normal flow.
Absolute positioning takes the element out of the normal document flow. Any absolutely positioned element is completely ignored when regarding normal elements.
This breaks in a lot of scenarios. The main one that springs to mind is putting elements underneath each other. With your column example, sure you can absolutely position 3 columns, but you can't put anything below that on the page, because the flow is still at the top of the page. The "absolute" elements do not affect where later content comes.
With floats, you just put an element afterwards and it wraps around or underneath the floating ones.
That's not to say it has no use. Positioning is very useful when you want to pop up a "layer" over the web page.
A short example... take this common HTML scenario:
<h2>Section title</h2>
<div class="column1">First</div>
<div class="column2">Second</div>
<div class="column3">Third</div>
<h2>Second section title</h2>
...
With floats, you'd use this CSS:
.column1, .column2, .column3 {
float: left;
width: 200px;
}
h2 {
clear: both;
}
And everything would be fine. Let's absolutely position the columns instead:
.column1, .column2, .column3 {
position: absolute;
width: 200px;
top: 30px; /* enough to miss the first h2 */
}
.column1 {
left: 0;
background: pink;
}
.column2 {
left: 200px;
background: lightgreen;
}
.column3 {
left: 400px;
background: lightblue;
}
Try this for yourself (with more content in each column) and see what happens to the second heading - it will always be right under the first one, as if the columns aren't there. Actually, the second heading would be mostly hidden by the columns since they're layered over the top of the document.
Unless the columns are fixed height then it is impossible to know where to put that heading below the columns. It's even worse if you want more columns under each heading.
Honestly, just give it a try and attempt a nice layout using absolute positioning. You'll soon understand its failings.
128
Float is not better than Position, and Position is not better than Float - both should be used in the correct situation. I would recommend you read the book http://www.transcendingcss.com/ if you want to learn more about when to use which one, and CSS styling in general.
See here for an example: http://transcendingcss.com/blog/about/changingman_layout_updated/
42
float will not break the document flow -- also, it will position any element it uses the best it can fit in the container width -- say I have 5 x 200px divs in a 800px width container, the last 5th will go in a "new line" below the other ones -- using position:relative will make you need to calculate when it needs to break yourself, and it won't break correctly since the display will either be block and go over the whole width or it will be inline-block or inline which won't render the same way for divs as block would and would pretty much mess up the document flow & layout.
It depends on what you want to do: position:relative is used to move the element a bit aside from it's natural location, whereas float will make it pop to the left-most or right-most position in the parent element. position:absolute will let you position it relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
