{"id":14121,"date":"2011-09-06T18:53:22","date_gmt":"2011-09-07T01:53:22","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14121"},"modified":"2019-11-03T15:47:49","modified_gmt":"2019-11-03T22:47:49","slug":"top-right-bottom-left","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/top-right-bottom-left\/","title":{"rendered":"top \/ bottom \/ left \/ right"},"content":{"rendered":"<p>The <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, and <code>right<\/code> properties are used with <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//p//position///">position<\/a> to set the placement of an element. They only have an effect on positioned elements, which are elements with the <code>position<\/code> property set to anything other than <code>static<\/code>. For example: <code>relative<\/code>, <code>absolute<\/code>, <code>fixed<\/code>, or <code>sticky<\/code>.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">div {\r\n  &lt;top || bottom || left || right&gt;: &lt;length&gt; || &lt;percentage&gt; || auto || inherit;\r\n}<\/code><\/pre>\n<p>You might use it, for example, to nudge an icon into place:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">button .icon {\r\n  position: relative;\r\n  top: 1px;\r\n}<\/code><\/pre>\n<p>Or position a special element inside a container.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.container {\r\n  position: relative;\r\n}\r\n.container header {\r\n  position: absolute;\r\n  top: 0;\r\n}<\/code><\/pre>\n<p>The value for <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, and <code>right<\/code> can be any of the following:<\/p>\n<ul>\n<li>any of the valid <a href=https://css-tricks.com/"//the-lengths-of-css///">lengths of CSS<\/a><\/li>\n<li>a percentage of the of the containing element&#8217;s height (for <code>top<\/code> and <code>bottom<\/code>) or width (for <code>left<\/code> and <code>right<\/code>)<\/li>\n<li><code>auto<\/code><\/li>\n<li><code>inherit<\/code><\/li>\n<\/ul>\n<p>The element will will generally move away from a given side when its value is positive, and towards it when the value is negative. In the example below, a positive length for <code>top<\/code> moves the element down (away from the top) and a negative length for <code>top<\/code> will move the element up (towards the top):<\/p>\n<p class=\"codepen\" data-height=\"450\" style=\"height: 450px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"missmatsuko\" data-slug-hash=\"LYPKzRG\" style=\"height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Top: positive and negative values\">\n  <span>See the Pen <a href=https://css-tricks.com/"https:////codepen.io//missmatsuko//pen//LYPKzRG/" rel=\"noopener\"><br \/>\n  Top: positive and negative values<\/a> by Matsuko Friedland (<a href=https://css-tricks.com/"https:////codepen.io//missmatsuko/" rel=\"noopener\">@missmatsuko<\/a>)<br \/>\n  on <a href=https://css-tricks.com/"https:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<h3>Position<\/h3>\n<p>The placement of an element with a value for <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, or <code>right<\/code> depends on its value for <code>position<\/code>. Let&#8217;s take a look at what happens when we set the same value for <code>top<\/code> on elements with different values for <code>position<\/code>.<\/p>\n<h4><code>static<\/code><\/h4>\n<p>The <code>top<\/code> property has no effect on unpositioned elements (elements with <code>position<\/code> set to <code>static<\/code>). This is how elements are positioned by default. You could use <code>position: static;<\/code> as one method to undo the effect of <code>top<\/code> on an element.<\/p>\n<h4><code>relative<\/code><\/h4>\n<p>When <code>top<\/code> is set on an element with <code>position<\/code> set to <code>relative<\/code>, the element will move up or down in relation to its original placement in the document.<\/p>\n<p class=\"codepen\" data-height=\"409\" style=\"height: 409px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"missmatsuko\" data-slug-hash=\"bGbPYGZ\" style=\"height: 409px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Top: relative\">\n  <span>See the Pen <a href=https://css-tricks.com/"https:////codepen.io//missmatsuko//pen//bGbPYGZ/" rel=\"noopener\"><br \/>\n  Top: relative<\/a> by Matsuko Friedland (<a href=https://css-tricks.com/"https:////codepen.io//missmatsuko/" rel=\"noopener\">@missmatsuko<\/a>)<br \/>\n  on <a href=https://css-tricks.com/"https:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<h4><code>absolute<\/code><\/h4>\n<p>When <code>top<\/code> is set on an element with <code>position<\/code> set to <code>absolute<\/code>, the element will move up or down in relation to its closest positioned ancestor (or the document, if there are no positioned ancestors).<\/p>\n<p>In this demo, the pink box on the left is positioned 50px down from the top of the page because it has no positioned ancestor elements. The pink box on the right is positioned 50px down from the top of its parent, because the parent has a <code>position<\/code> of <code>relative<\/code>.<\/p>\n<p class=\"codepen\" data-height=\"394\" style=\"height: 394px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"missmatsuko\" data-slug-hash=\"abogVzp\" style=\"height: 394px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Top: absolute\">\n  <span>See the Pen <a href=https://css-tricks.com/"https:////codepen.io//missmatsuko//pen//abogVzp/" rel=\"noopener\"><br \/>\n  Top: absolute<\/a> by Matsuko Friedland (<a href=https://css-tricks.com/"https:////codepen.io//missmatsuko/" rel=\"noopener\">@missmatsuko<\/a>)<br \/>\n  on <a href=https://css-tricks.com/"https:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<h4><code>fixed<\/code><\/h4>\n<p>When <code>top<\/code> is set on an element with <code>position<\/code> set to <code>fixed<\/code>, the element will move up or down in relation to the browser&#8217;s viewport.<\/p>\n<p class=\"codepen\" data-height=\"465\" style=\"height: 465px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"css-tricks\" data-slug-hash=\"poojXbP\" style=\"height: 465px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Top: fixed\">\n  <span>See the Pen <a href=https://css-tricks.com/"https:////codepen.io//team//css-tricks//pen//poojXbP/" rel=\"noopener\"><br \/>\n  Top: fixed<\/a> by CSS-Tricks (<a href=https://css-tricks.com/"https:////codepen.io//css-tricks/" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=https://css-tricks.com/"https:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<p>At first glance, it may seem like there isn&#8217;t a difference between <code>absolute<\/code> and <code>fixed<\/code>. The difference can be seen when you compare them on a page that has enough content to scroll. As you scroll down, the <code>fixed<\/code> position element is always in view, while the <code>absolute<\/code> position element scrolls away.<\/p>\n<p class=\"codepen\" data-height=\"402\" style=\"height: 402px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"css-tricks\" data-slug-hash=\"vYYNqKw\" style=\"height: 402px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Scrolling: fixed vs. absolute\">\n  <span>See the Pen <a href=https://css-tricks.com/"https:////codepen.io//team//css-tricks//pen//vYYNqKw/" rel=\"noopener\"><br \/>\n  Scrolling: fixed vs. absolute<\/a> by CSS-Tricks (<a href=https://css-tricks.com/"https:////codepen.io//css-tricks/" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=https://css-tricks.com/"https:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<h4><code>sticky<\/code><\/h4>\n<p>When <code>top<\/code> is set on an element with <code>position<\/code> set to <code>sticky<\/code>, the element will move up or down in relation to the nearest ancestor with a scrolling box (or the viewport, if no ancestor has a scrolling box), limited to the bounds of its containing element.<\/p>\n<p>Setting <code>top<\/code> on a <code>sticky<\/code> positioned element doesn&#8217;t do much unless its container is taller than it is, and you have enough content to scroll. Like with <code>fixed<\/code>, the element will stay in view as you scroll. Unlike <code>fixed<\/code>, the element will fall out of view once it reaches the edges of its containing element.<\/p>\n<p class=\"codepen\" data-height=\"574\" style=\"height: 574px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"css-tricks\" data-slug-hash=\"VwwvJKN\" style=\"height: 574px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Scrolling: fixed vs. sticky\">\n  <span>See the Pen <a href=https://css-tricks.com/"https:////codepen.io//team//css-tricks//pen//VwwvJKN/" rel=\"noopener\"><br \/>\n  Scrolling: fixed vs. sticky<\/a> by CSS-Tricks (<a href=https://css-tricks.com/"https:////codepen.io//css-tricks/" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=https://css-tricks.com/"https:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<h3>Gotchas<\/h3>\n<h4>Setting opposite sides<\/h4>\n<p>You can set a value for each of <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, and <code>right<\/code> on a single element. When you set values for opposite sides (<code>top<\/code> and <code>bottom<\/code>, or <code>left<\/code> and <code>right<\/code>), the result might not always be what you expect.<\/p>\n<p>In most cases, <code>bottom<\/code> is ignored if <code>top<\/code> is already set, and <code>right<\/code> is ignored if <code>left<\/code> is already set. When <a href=https://css-tricks.com/"//almanac//properties//d//direction///">direction<\/a> is set to <code>rtl<\/code> (right to left), <code>left<\/code> is ignored instead of <code>right<\/code>. In order for each value to have an effect, the element must have a <code>position<\/code> set to <code>absolute<\/code> or <code>fixed<\/code> and <code>height<\/code> set to <code>auto<\/code> (default).<\/p>\n<p>In this example, we set <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, and <code>right<\/code> to `20px`, and expect each side of the inner box to be 20px away from the sides of the outer box:<\/p>\n<p class=\"codepen\" data-height=\"415\" style=\"height: 415px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"css-tricks\" data-slug-hash=\"xxxYbvM\" style=\"height: 415px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Setting top, bottom, left, and right\">\n  <span>See the Pen <a href=https://css-tricks.com/"https:////codepen.io//team//css-tricks//pen//xxxYbvM/" rel=\"noopener\"><br \/>\n  Setting top, bottom, left, and right<\/a> by CSS-Tricks (<a href=https://css-tricks.com/"https:////codepen.io//css-tricks/" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=https://css-tricks.com/"https:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<h4>When fixed isn&#8217;t relative to the viewport<\/h4>\n<p>Elements with <code>position<\/code> set to <code>fixed<\/code> aren&#8217;t always positioned in relation to the viewport. It will be positioned relative to its closest ancestor with a <code>transform<\/code>, <code>perspective<\/code>, or <code>filter<\/code> property set to anything other than <code>none<\/code>, if one exists.<\/p>\n<h4>Adding or removing space<\/h4>\n<p>If you&#8217;ve positioned an element and found that there&#8217;s now an empty space or not enough space where you expected, it might have to do with whether the element is in or out of the document&#8217;s flow.<\/p>\n<p>When an element is taken out of the document&#8217;s flow, it means that the space it originally took up on the page disappears. This is the case when an element is positioned <code>absolute<\/code> or <code>fixed<\/code>. In this example, the containing box of the absolutely positioned element has collapsed because the absolutely positioned element was removed from the document&#8217;s flow:<\/p>\n<p class=\"codepen\" data-height=\"388\" style=\"height: 388px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"missmatsuko\" data-slug-hash=\"pozXWzZ\" style=\"height: 388px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Document flow\">\n  <span>See the Pen <a href=https://css-tricks.com/"https:////codepen.io//missmatsuko//pen//pozXWzZ/" rel=\"noopener\"><br \/>\n  Document flow<\/a> by Matsuko Friedland (<a href=https://css-tricks.com/"https:////codepen.io//missmatsuko/" rel=\"noopener\">@missmatsuko<\/a>)<br \/>\n  on <a href=https://css-tricks.com/"https:////codepen.io/" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<p>You can <a href=https://css-tricks.com/"https:////caniuse.com//#feat=mdn-css_properties_top\" rel=\"noopener\">take a peek<\/a>, but there are no cross-browser concerns for the <code>top<\/code> property. Use at will.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The top, bottom, left, and right properties are used with position to set the placement of an element. They only [&hellip;]<\/p>\n","protected":false},"author":267561,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[7711,5485,1254,7710,6465],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14121"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/267561"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14121"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14121\/revisions"}],"predecessor-version":[{"id":298263,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14121\/revisions\/298263"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14121"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}