How to use postion in CSS

Discussion in 'HTML & Website Design' started by Mike733, Jul 30, 2016.

  1. #1
    hi everyone
    i want to use the postion in CSS but i can't, because i don't and i can't understand them. like : absolute , relative ,static ,etc
    I dont know how to use them properly and where to use them.
    thank you
     
    Solved! View solution.
    Mike733, Jul 30, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Your question makes no sense. Why, exactly, do you want to use positioning?

    Static is the default.
    Relative is mostly used to give a position attribute to a container, so you can position something else relative to that container (inside)
    Absolute sets an element to an absolute position. If no container has a position set, the coordinates for the absolutely positioned element is based of the body element. If a container has a position, the element with the absolute positioning will be placed based on that.
    Fixed is just that, fixed based on positioning against body. A fixed element never moves, and will stay in place when scrolling the rest of the page.

    But, again, if you tell WHAT you wanna do, perhaps we can tell you how to do it.
     
    PoPSiCLe, Jul 30, 2016 IP
  3. Mike733

    Mike733 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    thank you very much for your answer, my english is not so good .
    for ex. i have a page like this : https://i.imgsafe.org/d0ba7508fa.jpg
    i have 4 circles , as you can see and a little one up there the black one
    i want to position them exactly like the image But i can't because i don't know how to use it.
    i will be glad if you help me.
    thanks
     
    Mike733, Jul 30, 2016 IP
  4. #4
    Depending on what you want to do, there is absolutely no reason to use position for any of that.
    Here's a quick example, not using any positioning. It is also flexible, and will work regardless of screensize (but if the screen gets too narrow, it will not look like that anymore) https://jsfiddle.net/j30cggd7/
     
    PoPSiCLe, Jul 30, 2016 IP
  5. Mike733

    Mike733 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    thank you
    why did you use "text-align"? , i thought we can use it only for texts.
     
    Mike733, Jul 31, 2016 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Because text-align has some other functionality as well, among others what you see there (aligning inline-block elements centered). Each li element has inline-block, which lets the element behave mostly like text in regards to flow.
     
    PoPSiCLe, Jul 31, 2016 IP