{"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\/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=\"\/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:\/\/codepen.io\/missmatsuko\/pen\/LYPKzRG\" rel=\"noopener\"><br \/>\n  Top: positive and negative values<\/a> by Matsuko Friedland (<a href=\"https:\/\/codepen.io\/missmatsuko\" rel=\"noopener\">@missmatsuko<\/a>)<br \/>\n  on <a href=\"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:\/\/codepen.io\/missmatsuko\/pen\/bGbPYGZ\" rel=\"noopener\"><br \/>\n  Top: relative<\/a> by Matsuko Friedland (<a href=\"https:\/\/codepen.io\/missmatsuko\" rel=\"noopener\">@missmatsuko<\/a>)<br \/>\n  on <a href=\"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:\/\/codepen.io\/missmatsuko\/pen\/abogVzp\" rel=\"noopener\"><br \/>\n  Top: absolute<\/a> by Matsuko Friedland (<a href=\"https:\/\/codepen.io\/missmatsuko\" rel=\"noopener\">@missmatsuko<\/a>)<br \/>\n  on <a href=\"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:\/\/codepen.io\/team\/css-tricks\/pen\/poojXbP\" rel=\"noopener\"><br \/>\n  Top: fixed<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=\"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:\/\/codepen.io\/team\/css-tricks\/pen\/vYYNqKw\" rel=\"noopener\"><br \/>\n  Scrolling: fixed vs. absolute<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=\"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:\/\/codepen.io\/team\/css-tricks\/pen\/VwwvJKN\" rel=\"noopener\"><br \/>\n  Scrolling: fixed vs. sticky<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=\"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=\"\/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:\/\/codepen.io\/team\/css-tricks\/pen\/xxxYbvM\" rel=\"noopener\"><br \/>\n  Setting top, bottom, left, and right<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=\"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:\/\/codepen.io\/missmatsuko\/pen\/pozXWzZ\" rel=\"noopener\"><br \/>\n  Document flow<\/a> by Matsuko Friedland (<a href=\"https:\/\/codepen.io\/missmatsuko\" rel=\"noopener\">@missmatsuko<\/a>)<br \/>\n  on <a href=\"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:\/\/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 have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky. div { &lt;top || bottom || left || right&gt;: [&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":{"_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":""},"tags":[7711,5485,1254,7710,6465],"acf":[],"jetpack-related-posts":[{"id":194885,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/","url_meta":{"origin":14121,"position":0},"title":"object-position","date":"February 3, 2015","format":false,"excerpt":"The CSS property object-position is used to align any selected replaced element (e.g., an <img>) within the box that contains it. img { object-position: right bottom; } An <img> element will align to bottom-right edge of its parent container with object-position: right bottom;. While it\u2019s probably most common to see\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":323048,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/","url_meta":{"origin":14121,"position":1},"title":"mask-position","date":"October 12, 2020","format":false,"excerpt":"In CSS, the mask-position property specifies the initial position of a mask layer image relative to the mask position area. It works like the background-position property. .element { \u00a0 mask-image: url(\"star.svg\"); \u00a0 mask-position: 20px center; } Masking allows you to display selected parts of an element while hiding the rest.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195512,"url":"https:\/\/css-tricks.com\/snippets\/sass\/maintain-aspect-ratio-mixin\/","url_meta":{"origin":14121,"position":2},"title":"Maintain Aspect Ratio Mixin","date":"February 10, 2015","format":false,"excerpt":"This article from July 2013 describes a method of using psuedo elements to maintain an elements aspect ratio, even as it scales. Here's a Sass mixin that simplifies the math a bit. @mixin aspect-ratio($width, $height) { position: relative; &:before { display: block; content: \"\"; width: 100%; padding-top: ($height \/ $width)\u2026","rel":"","context":"With 23 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325845,"url":"https:\/\/css-tricks.com\/video-screencasts\/198-about-the-position-property\/","url_meta":{"origin":14121,"position":3},"title":"#198: About the Position Property","date":"November 20, 2020","format":false,"excerpt":"static: the default relative: allows you to nudge around with top\/right\/bottom\/left, making z-index work, gives you a positioning contextabsolute: top\/right\/bottom\/left moves the element to that exact position, otherwise the same as relativefixed: like absolute, but scrolling the page doesn't move the element sticky: like fixed, but it doesn't become fixed\u2026","rel":"","context":"In \"layout\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/position-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":16536,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/position\/","url_meta":{"origin":14121,"position":4},"title":"position","date":"March 19, 2012","format":false,"excerpt":"The position property can help you manipulate the location of an element, for example: .element { position: relative; top: 20px; } Relative to its original position the element above will now be nudged down from the top by 20px. If we were to animate these properties we can see just\u2026","rel":"","context":"In \"position\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192863,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-offset-positioning\/","url_meta":{"origin":14121,"position":5},"title":"Mixin for Offset Positioning","date":"January 11, 2015","format":false,"excerpt":"If there is one shorthand CSS dramatically misses, it is the one making it possible to define the position property, as well as the four offset properties (top, right, bottom, left). Fortunately, this is typically something that can be solved with a CSS preprocessor such as Sass. We only have\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_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}]}}