11

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.

PeanutsMonkey
  • 6,919
  • 23
  • 73
  • 103
  • You can watch [this](https://www.youtube.com/watch?v=lUaw-AA9HnA) video to learn when to use absolute positioning. – Vaibhav May 20 '21 at 08:37

5 Answers5

9

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.

DrStrangeLove
  • 11,227
  • 16
  • 59
  • 72
5

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/

Satish
  • 6,457
  • 8
  • 43
  • 63
  • 1
    Thanks. I have read about CSS Box Models however none of them explain WHEN I should use say relative, relative and absolute and fixed. I know there is an answer that applies to all situations but it would be good to get an idea. – PeanutsMonkey May 14 '11 at 17:45
4

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.

Kamil Sindi
  • 21,782
  • 19
  • 96
  • 120
  • When you say `relative to each other`, what does this mean exactly e.g. say I have my logo element on the left and would like my navigation to appear to its right, would this mean I would like to position it relatively to my right? I have seen examples of using relative together with absolute but again, I am not very clear. From what I have been told numerous times now is to stay away from W3 Schools as they don't adhere to standards... – PeanutsMonkey May 14 '11 at 17:44
  • Hmmm. It does seems that there are critics of W3 Schools. I like using it when referencing simple things, but maybe they're not the best. On your relative positioning question, you're right in that you are positioning the navigation right relative to your to the logo on your left. I've never used absolute so don't know if it can be used. – Kamil Sindi May 14 '11 at 18:28
0

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/

j0k
  • 22,600
  • 28
  • 79
  • 90
Najam Guru
  • 1
0

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.

YATIN GUPTA
  • 916
  • 9
  • 17