{"id":5251,"date":"2013-01-14T06:30:28","date_gmt":"2013-01-14T13:30:28","guid":{"rendered":"http:\/\/www.vanseodesign.com\/?p=5251"},"modified":"2013-01-14T06:30:28","modified_gmt":"2013-01-14T13:30:28","slug":"auto-positioning","status":"publish","type":"post","link":"https:\/\/vanseodesign.com\/css\/auto-positioning\/","title":{"rendered":"How Does Auto Positioning Work In CSS?"},"content":{"rendered":"

A few weeks ago Andrei raised an interesting question<\/a> on one of my older posts. The post shows how to create a navigation bar. Andrei noticed the submenu was positioned absolutely, but none of its ancestor elements had positioning applied. Why then did the submenu display directly below its parent link in the menu?
\n
\nI honestly didn’t know. Like Andrei my expectation was the submenu should be positioned relative<\/a> to the html element given the absence of other positioned elements and should appear in the top left corner of the browser, but it didn’t.<\/p>\n

The reason turned out to be very simple, though it took some investigation to find it. I’ll spare you the false leads and just explain what’s going on.<\/p>\n

\"2<\/a><\/figure>\n

Containing Blocks Set Positioning Context<\/h2>\n

As a quick review when you use css positioning on an element its position is relative to some containing block<\/a>. That containing block will be the nearest ancestor element that also has positioning (other than static) applied. If there is no ancestor with positioning applied the containing block becomes the initial containing block, which is the html element.<\/p>\n

In the post I was using the Suckerfish system to create a drop down menu<\/a>. I’ve been using it to create drop downs for as long as I can remember. You probably have too. By default you position your submenu far off the page, usually -999em to the left. On hover you change the value of left to auto and the submenu appears directly below its parent menu item.<\/p>\n

At first glance the submenu seems to be ignoring the above information about containing blocks. None of its ancestors have positioning set implying it should be positioned relative to the html element or the browser window.<\/p>\n

At least that’s what Andrei and I both thought should happen. Our mistake was in how we interpreted “auto” to work.<\/p>\n

\"Submenu<\/figure>\n

How Should a Browser Interpret Auto?<\/h2>\n

We were both assuming that a value of auto was the same as a value of 0 and so setting left: auto was equivalent to left: 0. There are times when a css value of auto equates to 0. This is not one of those times though.<\/p>\n

When an element has been set to position: absolute, its position (and possibly size) is specified with the ‘top’, ‘right’, ‘bottom’, and ‘left’ properties. These properties specify offsets with respect to the box’s containing block. For non-replaced elements<\/a>, the effect of the auto value (for top, right, bottom, or left) depends on which of these other related properties have the value ‘auto’ as well.<\/p>\n

That last part is the key. By definition auto isn’t 0. It might be, but it depends on the values set on the other properties.<\/p>\n

The Suckerfish drop down sets and then changes the “left” property, but it leaves the other 3 properties as auto. When we initially set left to -999em the right value comes along for the ride and the submenu is located way off the page. On hover when we change left to auto we have the condition where all 4 values are auto.<\/p>\n

An article I came across on auto positioning for absolutely positioned elements<\/a> explains what happens as does this article from Dev.Opera on absolute and fixed positioning<\/a>. The quote below is from the latter.<\/p>\n

\nThe default value for the top, right, bottom and left properties is auto, which means the absolutely positioned box will appear exactly where it would have had if it wasn\u2019t positioned. Since it\u2019s removed from the flow it will overlap any elements in the normal flow that follow it, though.\n<\/p><\/blockquote>\n

You can see this in action in the images above and below this section. Above is where the menu appears when hovering over its parent link. Here left (as well as right, top, and bottom) are set to auto.<\/p>\n

Below is the same menu when I remove positioning on the submenu. The submenu is located in the same place as above. The top level menu items are in different locations, because the sub menu is now again in the document flow, but the submenu itself is located in the same place in both images.<\/p>\n

It’s obvious once you think about it. If the default of auto was 0, then an element with all 4 sides set to 0 would need to stretch to each edge of its container. There are times when we rely on this stretching. It’s part of one method for vertically centering elements<\/a>.<\/p>\n

That’s clearly not what’s happening here. When all 4 sides (or really when either of the 2 opposing sides) hold values of auto it’s up to the browser to decide how best to locate the element.<\/p>\n

We rely on this to horizontally center block level elements<\/a> with margin-left: auto and margin-right: auto. In this case the margin is split equally and the element centered. In the case of the drop down, a child list gets displayed exactly where it would have been located if no positioning were applied.<\/p>\n

\"Submenu<\/figure>\n

Summary<\/h2>\n

Some of you might be thinking why am I wasting time talking about something so obvious. It’s obvious in hindsight, but it certainly wasn’t obvious to me before digging into containing blocks and how auto-positioning works. Since Andrei raised the question, I assume it wasn’t obvious to him either. And if it wasn’t obvious to either of us, I assume there are others who would also say it wasn’t so obvious to them.<\/p>\n

Sometimes we accept that a technique works<\/a> without taking the time to understand why it it works. When asked why we’re at a loss to answer. It’s worthwhile to figure out why<\/a> and better understand what’s happening.<\/p>\n

I’ll no longer take the auto value for granted on any property and assume it equates to what I initially expect. Instead I’ll think about how it will be computed and what will happen based on other possible auto values on related properties. More than likely it will usually behave exactly as I’ve always assumed, but I suspect there will be a few times where it doesn’t and in not behaving as expected it might allow for some interesting results.<\/p>\n","protected":false},"excerpt":{"rendered":"

A few weeks ago Andrei raised an interesting question on one of my older posts. The post shows how to create a navigation bar. Andrei noticed the submenu was positioned absolutely, but none of its ancestor elements had positioning applied. Why then did the submenu display directly below its parent link in the menu?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[107,108],"series":[],"class_list":["post-5251","post","type-post","status-publish","format-standard","hentry","category-css","tag-auto","tag-positioning"],"yoast_head":"\nHow Does Auto Positioning Work In CSS? - Vanseo Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vanseodesign.com\/css\/auto-positioning\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Does Auto Positioning Work In CSS? - Vanseo Design\" \/>\n<meta property=\"og:description\" content=\"A few weeks ago Andrei raised an interesting question on one of my older posts. The post shows how to create a navigation bar. Andrei noticed the submenu was positioned absolutely, but none of its ancestor elements had positioning applied. Why then did the submenu display directly below its parent link in the menu?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vanseodesign.com\/css\/auto-positioning\/\" \/>\n<meta property=\"og:site_name\" content=\"Vanseo Design\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-14T13:30:28+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2013\/01\/blocks.jpg\" \/>\n<meta name=\"author\" content=\"Steven Bradley\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steven Bradley\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/\"},\"author\":{\"name\":\"Steven Bradley\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#\\\/schema\\\/person\\\/470cda6ba835fb52596b2e26bcbd8fe4\"},\"headline\":\"How Does Auto Positioning Work In CSS?\",\"datePublished\":\"2013-01-14T13:30:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/\"},\"wordCount\":1024,\"commentCount\":19,\"image\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.vanseodesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/01\\\/blocks.jpg\",\"keywords\":[\"auto\",\"positioning\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/\",\"url\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/\",\"name\":\"How Does Auto Positioning Work In CSS? - Vanseo Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.vanseodesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/01\\\/blocks.jpg\",\"datePublished\":\"2013-01-14T13:30:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#\\\/schema\\\/person\\\/470cda6ba835fb52596b2e26bcbd8fe4\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.vanseodesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/01\\\/blocks.jpg\",\"contentUrl\":\"http:\\\/\\\/www.vanseodesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/01\\\/blocks.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/auto-positioning\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vanseodesign.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How Does Auto Positioning Work In CSS?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#website\",\"url\":\"https:\\\/\\\/vanseodesign.com\\\/\",\"name\":\"Vanseo Design\",\"description\":\"Helping you build search engine friendly websites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vanseodesign.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#\\\/schema\\\/person\\\/470cda6ba835fb52596b2e26bcbd8fe4\",\"name\":\"Steven Bradley\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"\\\/\\\/www.gravatar.com\\\/avatar\\\/0f47bf400c3c1bafe06ee2884405baaa?s=96&r=pg&d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png\",\"url\":\"\\\/\\\/www.gravatar.com\\\/avatar\\\/0f47bf400c3c1bafe06ee2884405baaa?s=96&r=pg&d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png\",\"contentUrl\":\"\\\/\\\/www.gravatar.com\\\/avatar\\\/0f47bf400c3c1bafe06ee2884405baaa?s=96&r=pg&d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png\",\"caption\":\"Steven Bradley\"},\"sameAs\":[\"https:\\\/\\\/www.vanseodesign.com\\\/about\\\/\"],\"url\":\"https:\\\/\\\/vanseodesign.com\\\/author\\\/vangogh\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Does Auto Positioning Work In CSS? - Vanseo Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vanseodesign.com\/css\/auto-positioning\/","og_locale":"en_US","og_type":"article","og_title":"How Does Auto Positioning Work In CSS? - Vanseo Design","og_description":"A few weeks ago Andrei raised an interesting question on one of my older posts. The post shows how to create a navigation bar. Andrei noticed the submenu was positioned absolutely, but none of its ancestor elements had positioning applied. Why then did the submenu display directly below its parent link in the menu?","og_url":"https:\/\/vanseodesign.com\/css\/auto-positioning\/","og_site_name":"Vanseo Design","article_published_time":"2013-01-14T13:30:28+00:00","og_image":[{"url":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2013\/01\/blocks.jpg","type":"","width":"","height":""}],"author":"Steven Bradley","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Steven Bradley","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/#article","isPartOf":{"@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/"},"author":{"name":"Steven Bradley","@id":"https:\/\/vanseodesign.com\/#\/schema\/person\/470cda6ba835fb52596b2e26bcbd8fe4"},"headline":"How Does Auto Positioning Work In CSS?","datePublished":"2013-01-14T13:30:28+00:00","mainEntityOfPage":{"@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/"},"wordCount":1024,"commentCount":19,"image":{"@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2013\/01\/blocks.jpg","keywords":["auto","positioning"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vanseodesign.com\/css\/auto-positioning\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/","url":"https:\/\/vanseodesign.com\/css\/auto-positioning\/","name":"How Does Auto Positioning Work In CSS? - Vanseo Design","isPartOf":{"@id":"https:\/\/vanseodesign.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/#primaryimage"},"image":{"@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2013\/01\/blocks.jpg","datePublished":"2013-01-14T13:30:28+00:00","author":{"@id":"https:\/\/vanseodesign.com\/#\/schema\/person\/470cda6ba835fb52596b2e26bcbd8fe4"},"breadcrumb":{"@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vanseodesign.com\/css\/auto-positioning\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/#primaryimage","url":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2013\/01\/blocks.jpg","contentUrl":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2013\/01\/blocks.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/vanseodesign.com\/css\/auto-positioning\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vanseodesign.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/vanseodesign.com\/css\/"},{"@type":"ListItem","position":3,"name":"How Does Auto Positioning Work In CSS?"}]},{"@type":"WebSite","@id":"https:\/\/vanseodesign.com\/#website","url":"https:\/\/vanseodesign.com\/","name":"Vanseo Design","description":"Helping you build search engine friendly websites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vanseodesign.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/vanseodesign.com\/#\/schema\/person\/470cda6ba835fb52596b2e26bcbd8fe4","name":"Steven Bradley","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"\/\/www.gravatar.com\/avatar\/0f47bf400c3c1bafe06ee2884405baaa?s=96&r=pg&d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png","url":"\/\/www.gravatar.com\/avatar\/0f47bf400c3c1bafe06ee2884405baaa?s=96&r=pg&d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png","contentUrl":"\/\/www.gravatar.com\/avatar\/0f47bf400c3c1bafe06ee2884405baaa?s=96&r=pg&d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png","caption":"Steven Bradley"},"sameAs":["https:\/\/www.vanseodesign.com\/about\/"],"url":"https:\/\/vanseodesign.com\/author\/vangogh\/"}]}},"_links":{"self":[{"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/posts\/5251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/comments?post=5251"}],"version-history":[{"count":0,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/posts\/5251\/revisions"}],"wp:attachment":[{"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/media?parent=5251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/categories?post=5251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/tags?post=5251"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/series?post=5251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}