How positioning can save our time if we use in place of float on some place in layout coding?
How we can judge where positioning would give better result?
For example (i added just for example) if this is a design
So far i only use float + margin + padding, now if i can mix positioning and save time and get pixel perfection easily then float.
Guide me
Thanks in advance.
Update 1:
these are common elements of website. should i use positioning for any of them?
The Header
---logo
---serch box
---The Navigation Menu
---top links
---Breadcrumbs
The Text Area
---Paragraphs
---images( left , right or center align)
---Tables
---vertical ordered and unordered list
The Sidebar
---vertical ordered and unordered list
The Footer
---copyright
---Important Links (horizontal list)
Form elements
Update 2:
Does positioning have any
Compatibility issue(including IE6) than float?
Is positioning is only good for fixed
width design or it's good for both
liquid and fixed?
For that layout, you don't need to use nothing else than floats, margins and paddings. Positioning (relative, absolute, fixed) should be used only in 'special occasions', eg. when you want to lift an element out of the document flow and place it somewhere it would be otherwise hard to place.
You won't save any time and won't get any more 'pixel perfect' results with positioning. You should be able to do that using traditional methods.
The only reason you should use absolute positioning in that layout is because of the RSS icon, that's a 'special occasion' I was talking about.
Looking at the design there is minimal need to using positioning, the only I can see it may be need is t give the overlapping effect on the RSS icon but even then you could do some trickery with background images to give the effect that it is overlapping.
On my sites I use position if I need to give the user the experince that elements overlap outside of the box model. Otherwise you should be fine floating, padding and using margins.
One tip howerver if you are using position:absolute; make sure the parent element has position:relative;
Related
I've been working with HTML and CSS for a while now.
Every time I work in CSS, I have a feeling that I'm not "doing it right".
For instance, when positioning different divs and elements on a webpage, I use "position: absolute" and "position: relative" quite often.
This can sometimes be very tedious to find the "right" position and results in very ugly numbers, such as:
position: relative;
width: 1300px;
height: -720px;
In addition to above, it also makes it very difficult to edit said divs and elements later on if I change my mind about their appearance or position.
I've watched a lot of tutorials on YouTube where people use "margin" and "padding" tags to position the elements on their websites.
I'm very confused by this since those tags are supposed to be used for creating space around elements and not actually change their position.
The strange thing is, that it is much easier to edit the website using "margin" and "padding" tags later on, if you change your mind about the appearance/positioning of those elements since they won't move around and overlap each other.
I apologize for the long query but this has been bothering me a lot lately and I would appreciate any advice regarding the positioning of elements in CSS.
Thank you
The biggest distinction between position and margin or padding is that when you set the position to absolute, relative or fixed, the element is taken out of the "normal flow" of the document and placed in its own layer. This is what allows you to use the z-index property and stack elements on top of each other. This has dramatic advantages when the elements in question are going to be dynamically sized or animated because doing so won't cause all other elements in the document to have to "re-flow", nor will the entire document have to "re-paint". In fact, when working with dynamic sizing or animations it is strongly recommended that you take elements out of the flow this way or performance can suffer.
Beyond this, understanding how absolute, relative and fixed positioning work is essential.
Absolute Positioning positions the element relative to its nearest ancestor that, itself, has been manually positioned or the body element if no ancestor has been positioned. The element is taken out of the flow and any space the element was taking up in that flow is removed.
Relative Positioning positions the element as an offset to its original location in the normal flow, but leaves the original space that the element took up in the document even though the element is now in its own layer.
Fixed Positioning is similar to absolute, except that the position is not relative to anything. It is fixed at an exact location you specify.
While all of these will pull the element into its own layer, how the layers are stacked (via "stacking contexts") are dependent upon which type of positioning you've used and the structure of the elements being positioned.
These are the reasons to use position. If you are not in need of new layers, using CSS float, flexbox are tools that can offer alternative ways to design a layout.
margin and padding should really not be used for the layout itself. They are used for small tweaks within a layout.
In summary, the default way the a browser lays out the contents of a page is the CSS Box Model, but using CSS position is one way to have certain content use that box model in different layers from the main content. CSS floats offer another, separate layout algorithm and Flexbox offers yet another. In the near future, the CSS Grid specification will be standardized and yet another layout paradigm will be available.
But margin and padding are not layout models. They are just tools to use in whatever layout model you happen to be using.
First of all, this concept started with a CodePen project here: http://codepen.io/marionebl/pen/fensm. I forked the pen here: http://codepen.io/anon/pen/bEWmwB. I changed a div to relative positioning, which made it in front of the overflow content. The only way to change this is to make the div static positioning.
The question: What are some tips to moving static objects? My own tips: Making a border of like 50px solid white. Or, with tags like <p>. You can you the whitespace tag:
Are there any other ways to position a static object?
There are many ways to position an object without using the position property.
Lets go over a few.
1:As Josh Sangar said in the comments Margins and paddings.
Margins and paddings are perhaps one of the better and easier ways to position elements. Why? The main reason I believe is that unlike the position property margins and paddings will help your content react to different screen sizes without the content "disappearing" off to the side when the screen size changes.
2:Another way is to use floats. Floats are simple and is also best used with margins and padding.
There are also many obsolete ways of positioning using tables,frames etc...
You should never use these obsolete ways of the past.
There is margin-left, margin-right, margin-top and margin-bottom. But is there also a margin where you can margin from the center of the page ?
Imagine I want to build everything from the center with the help of angles or something like that:D Is that possible ?
As far as I know, if only using the features and functions of CSS, it is impossible.
HTML rendering process is like:
draw some horizontal lines to divide the top-down areas.
put some boxes into each area by floating left or right.
with some other special controls like relative position ...
If you really want to do that, you need to use JavaScript to handle it manually. You need to control the absolute positions for all the elements, calculate and reset them when some elements changed.
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
I am new to the world of coding, XHTML, CSS as well as PHP. I have come across numerous tutorials regarding positioning i.e. relative, absolute and fixed however have no idea when I have to use them or when it is the best to use them. I would appreciate some examples.
ALA has a nice tutorial (there're lots of examples)
CSS positioning can be especially useful when you need to position something that cannot be positioned within normal flow.
For understanding CSS positioning, you need to get familiarize with the "CSS BOX Model"
There are tons of tutorials online.
Here are some good ones with examples for beginners:
http://www.brainjar.com/css/positioning/default.asp
http://www.tizag.com/cssT/position.php
http://www.alistapart.com/articles/css-positioning-101/
Two that I frequently use are:
Relative positioning: helps you style elements relative to other elements. E.g. you want to move an input to the right relative to the div it's inside.
Fixed positioning: great for things like Refresh suggestions that get 'fixed' so that they follow you wherever you scroll.
It's best to play around with them and see for yourself.
To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. It also points out some things to watch out for.
http://www.handycss.com/how/how-to-use-css-positioning/
My understanding is that we should use positioning either when we want to place any CSS element with respect to view port(position:fixed) or we want to place CSS element with respect to container(container get position:relative and child get position:absolute). But you should know limitation before using position absolute or position fixed. Absolute and fixed don't contribute to height of the parent element. This can create various unexpected results. Suppose you want to apply background image on relative element which has absolute element containing most of content. Background image will not spread over your content as it will not get height of content. Also you should not heavily rely on top/left/bottom/right for placing elements. They might help you to get expected arrangement on one view port size but can distort it completely on other view port size/resolution.