Sunday, December 30, 2018

CSS Positioning: a summary

I've been frustrated every time I try to grasp CSS for years. "I just want this on the left and this to be over here!" etc. Now I realize that CSS doesn't work that way for very good reasons. In most programming, we give instructions for what we want to happen. But in CSS, it's more like we are describing a situation -- relationships -- and then letting the browser figure it out. That's because the browser has to handle many different circumstances. Resolutions, interfaces, font sizes. I describe how the parts go together, it figures out how to put them on the screen.

When I get upset about the properties for one part being dependent on the properties of its parent containers and siblings, it's OK Jess: remember that CSS is about interrelationships, so this is normal.

Having got that, I'm now able to learn about how to put things on the screen without yelling in frustration and confusion.

So far, I've looked up the position property and learned that it doesn't do much. There are other ones like display that seem more important. But meanwhile here's my executive summary:

The position property determines two things: whether the element participates in document flow, and what the properties top bottom left right do. These are the useful ones:

position: static - the default. Stay in document flow; top bottom left right do nothing.

position: relative - nudge. Stay in document flow.  top bottom left right nudge the element in that direction from where it would have been. This also has some effect on child element positioning, at least in the case of ::before pseudo-elements (weird CSS tricks).

position: absolute - override. Remove the element from document flow. top bottom left right tell it where exactly where to be within the document (or within the next absolutely-positioned element up the tree).

position: fixed - override and hold weirdly still. Remove the element from document flow
tell it exactly where to be within the viewport. That means within the browser window (or the iframe if it's in one). When the page scrolls, this element stays in the same place. People use this for menus.

Please lmk if you have corrections.

24 comments:

  1. Thanks for posing nice article. Mskanishka is best Bangalore Escort Agency. Mskanishka provides the best Independent Call Girls in Bangalore.

    #Bangalore escorts,
    #Bangalore escorts service,
    #Independent Bangalore escorts,
    #Bangalore call girls,
    #Escorts in Bangalore,
    #Escorts agency Bangalore,
    visit Bangalore escorts
    visit Bangalore Escorts Agency

    ReplyDelete
  2. Thanks for posing nice article. Hot-escort-services provides Female Escort Service and best Independent Call Girls service in Bangalore.
    #Bangalore Call Girls,
    #High Profile Escort Bangalore,
    #Escorts Services in Bangalore,
    #Bangalore Escorts Agency,
    #Independent Call Girls in Bangalore,
    #Bangalore Escort Girls,
    #Female Escort Service in Bangalore,
    http://hotescortservices.com/

    ReplyDelete
  3. Organic Spices in Goa Many online organic and natural food stores are also great when you need dairy-free, soy-free, vegan, vegetarian, or gluten-free foods. No need to stand in an aisle to read the list of ingredients on your breakfast cereal, since you can click a button to see all the items that fit your criteria. While you’re shopping, many of the online stores also sell household goods, so you may never need to visit your local grocery store again
    https://www.vegiorganic.com/


    ReplyDelete
  4. Thanks for a great summary! One small thing is that I think an absolute element's position can also be within the nearest relative positioned parent (not just absolutely positioned).

    ReplyDelete
  5. Your blog furnished us with important data to work with. Each and every tips of your post are amazing.
    css beautifier

    ReplyDelete
  6. Thanks a lot for sharing such nice article, will definitely help us.

    ReplyDelete
  7. Let me add a non-bot comment ey...

    position: sticky - object exists in the document flow, but will be positioned visually according to its left, top, bottom, right values.

    The 'sticky' behaviour is bounded by the element's offset parent's bounding box.

    ReplyDelete
  8. I clearly remember that last time when I visited your site I was so impressed and this time very very impressed, thanks for the good content.
    https://www.imediasolutions.in/online/logo-designer-india.php

    ReplyDelete
  9. Looking for the best state of the art classic car for your perfect day? Carol's classics has some of the finest vintage cars in its lot, from Rolls Royces to jaguars.

    ReplyDelete
  10. Nice info. This is very impressive post, Very useful information, it clarified things a lot for us. Thanks for sharing valuable tips. - dentist in bloomington il


    Vogue Dental


    https://voguedental.com/

    ReplyDelete
  11. Nice info. This is very impressive post, Very useful information, it clarified things a lot for us. Thanks for sharing valuable tips. - dentist in bloomington il


    Vogue Dental


    https://voguedental.com/

    ReplyDelete
  12. I am very thankful to you as your article has given me lots of ideas. I enjoyed a lot by reading this post. Thanks for sharing your blog. - dentist in springfield

    OptimDental Care

    https://www.optimdentalcare.com/

    ReplyDelete
  13. Wow wonderful Imaging, I am Guru Badal Bhargav. Thanks for sharing this blog. you can searing this blog here. It's really positive-full for me and my knowledge.. Love Marriage Specialist

    ReplyDelete
  14. Hi, I am agree with you. you describe all that things very clearly. It helps me lot. Guy any body looking forHomework help service. check out my website, offers this service very affordable prices.

    ReplyDelete
  15. I am very thankful to you as your article has given me lots of ideas. I enjoyed a lot by reading this post. Thanks for sharing your blog. - dentist in peoria il


    Optim Dental Care


    https://www.optimdentalcare.com/

    ReplyDelete
  16. Thank you very much for sharing such a use-full article.
    It really helps a lot.
    Thank you again.

    Upcoming marathon events in India

    ReplyDelete
  17. Thank you very much for writing such an interesting post.
    Web Hosting Dubai

    ReplyDelete
  18. Nice Blog.Thanks for posting this valuable information with all of us.
    School Buses in Dubai

    ReplyDelete
  19. You blog awesome.The points are mention in blog just great and awesome.

    Thanks a lot for this great article about easy ways to make money online from home. I think the methods you discuss are all excellent ways to get started although bogging is my favorite. Everything you say is true, although I think that just taking action is the hardest thing for most people.

    您是否打算在亚马逊网上购买产品。在您购买产品之前,请访问我们的网站,了解如何选择最佳产品 - 女生滑雪装备

    ReplyDelete