CINXE.COM
CSS position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS position, css positioning, elements, postion, positon, relative, absolute, stylesheets"> <meta name="Description" content="CSS position</code></dt><dd>CSS property for positioning an element."> <link rel="canonical" href="https://www.quackit.com/css/properties/css_position.cfm"> <title>CSS position</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS position</h1> <div class="ad ad-top"> <!-- GAM 71161633/QCKIT_quackit/article_header --> <div data-fuse="23059883623"></div> </div> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><!doctype html>
<title>Example</title>
<style>
div {
 width: 200px;
 height: 100px;
 padding: 10px;
 border: 1px solid orange;
 position: relative;
 top: 70px;
 left: 120px;
 }
</style>
<div class="inner">This 'div' is positioned using the CSS position property. Try changing the values to see the effect it has on the position of the div.</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/properties/css_position" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p class="lead">The CSS <code>position</code> property determines which of the positioning algorithms is used to calculate the position of a box.</p> <p>The <code>position</code> property can be used in conjunction with the <a href="/css/properties/css_top.cfm"><code>top</code></a>, <a href="/css/properties/css_right.cfm"><code>right</code></a>, <a href="/css/properties/css_bottom.cfm"><code>bottom</code></a>, and <a href="/css/properties/css_left.cfm"><code>left</code></a> properties to position an element where you want it.</p> <p>You can use the <code>position</code> property to make an element's position static, relative, absolute, fixed, or sticky. See below for an explanation on these.</p> <div class="ad"> <!-- GAM 71161633/QCKIT_quackit/article_incontent_1 --> <div data-fuse="23059883629"></div> </div> <h2>Syntax</h2> <script src="/common/js/codemirror/mode/text/css/text/css.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false">position: static | relative | absolute | sticky | fixed</textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>These values are explained below.</p> <h2>Possible Values</h2> <dl> <dt><dfn><code>static</code></dfn></dt> <dd>The element flows as normal. The <a href="/css/properties/css_top.cfm"><code>top</code></a>, <a href="/css/properties/css_right.cfm"><code>right</code></a>, <a href="/css/properties/css_bottom.cfm"><code>bottom</code></a>, and <a href="/css/properties/css_left.cfm"><code>left</code></a> properties don't apply.</dd> <dt><dfn><code>relative</code></dfn></dt> <dd> <p>The box's position is calculated according to the normal flow. Then the box is offset relative to its normal position and in all cases, including table elements, does not affect the position of any following boxes. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of <code>position: relative</code> on table elements is defined as follows:</p> <ul> <li><code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code> and <code>table-row</code> offset relative to its normal position within the table. If table-cells span multiple rows, only the cells originating in the relative positioned row is offset.</li> <li><code>table-column-group</code>, <code>table-column</code> do not offset the respective column and has no visual affect when <code>position: relative</code> is applied.</li> <li><code>table-caption</code> and <code>table-cell</code> offset relative to its normal position within the table. If a table cell spans multiple columns or rows the full spanned cell is offset.</li> </ul> </dd> <dt><dfn><code>absolute</code></dfn></dt> <dd> <p>The box's position (and potentionally, its size) is specified with the <a href="/css/properties/css_top.cfm"><code>top</code></a>, <a href="/css/properties/css_right.cfm"><code>right</code></a>, <a href="/css/properties/css_bottom.cfm"><code>bottom</code></a>, and <a href="/css/properties/css_left.cfm"><code>left</code></a> properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Though absolutely positioned boxes may have margins, those margins do not collapse with any other margins.</p> </dd> <dt><dfn><code>sticky</code></dfn></dt> <dd>The box's position is calculated according to the normal flow. Then the box is offset relative to its flow root and containing block and in all cases, including <a href="/html/tags/html_table_tag.cfm"><code class="tag">table</code></a> elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of <code>position: sticky</code> on <a href="/html/tags/html_table_tag.cfm"><code class="tag">table</code></a> elements is the same as for <code>position: relative</code>.</dd> <dt><dfn><code>fixed</code></dfn></dt> <dd> <p>Similar to absolute, but also doesn't move when scrolled. The box is in a fixed position that doesn't scroll with the rest of the content. When using the print media type, the box is rendered on every page.</p> <p>The <code>fixed</code> value always creates a new stacking context. When an ancestor has the <a href="/css/css3/properties/css_transform.cfm"><code>transform</code></a> property set to a value other than <code>none</code>, then the ancestor is used as a containing block.</p> </dd> </dl> <p>In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value: </p> <dl> <dt><code>initial</code></dt> <dd>Represents the value specified as the property's initial value.</dd> <dt><code>inherit</code></dt> <dd>Represents the computed value of the property on the element's parent.</dd> <dt><code>unset</code></dt> <dd>This value acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.</dd> </dl> <h2>General Information</h2> <div class="specifications"> <dl> <dt>Initial Value</dt> <dd><code>static</code></dd> <dt>Applies To</dt> <dd>All elements except <code>table-column-group</code> and <code>table-column</code>.</dd> <dt>Inherited?</dt> <dd>No</dd> <dt>Media</dt> <dd>Visual</dd> </dl> </div> <h2>Example Code</h2> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false">div {
 position: fixed;
 top: 20px;
 left: 50px;
 }</textarea> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Official Specifications</h2> <ul> <li><a href="https://www.w3.org/TR/css-position-3/#position-property">CSS Positioned Layout Module Level 3</a> (W3C Working Draft)</li> <li><a href="https://www.w3.org/TR/CSS21/visuren.html#propdef-position">CSS Level 2.1</a> (W3C Recommendation 07 June 2011)</li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/properties/">CSS Properties</a></h3> <ul> <li><a href="/css/css3/properties/css_animation.cfm">animation</a></li> <li><a href="/css/properties/css_background.cfm">background</a></li> <li><a href="/css/css3/properties/css_bleed.cfm">bleed</a></li> <li><a href="/css/css3/properties/css_border-radius.cfm">border-radius</a></li> <li><a href="/css/properties/css_border.cfm">border</a></li> <li><a href="/css/css3/properties/css_box-shadow.cfm">box-shadow</a></li> <li><a href="/css/css3/properties/css_box-sizing.cfm">box-sizing</a></li> <li><a href="/css/properties/css_clear.cfm">clear</a></li> <li><a href="/css/properties/css_clip.cfm">clip</a></li> <li><a href="/css/properties/css_color.cfm">color</a></li> <li><a href="/css/css3/properties/css_columns.cfm">columns</a></li> <li><a href="/css/properties/css_content.cfm">content</a></li> <li><a href="/css/properties/css_counter-increment.cfm">counter-increment</a></li> <li><a href="/css/properties/css_cue.cfm">cue</a></li> <li><a href="/css/properties/css_cursor.cfm">cursor</a></li> <li><a href="/css/properties/css_display.cfm">display</a></li> <li><a href="/css/css3/properties/css_filter.cfm">filter</a></li> <li><a href="/css/css3/properties/css_flex.cfm">flex</a></li> <li><a href="/css/properties/css_float.cfm">float</a></li> <li><a href="/css/properties/css_font-family.cfm">font-family</a></li> <li><a href="/css/properties/css_font-size.cfm">font-size</a></li> <li><a href="/css/properties/css_font.cfm">font</a></li> <li><a href="/css/properties/css_height.cfm">height</a></li> <li><a href="/css/properties/css_left.cfm">left</a></li> <li><a href="/css/properties/css_list-style.cfm">list-style</a></li> <li><a href="/css/properties/css_margin.cfm">margin</a></li> <li><a href="/css/css3/properties/css_mix-blend-mode.cfm">mix-blend-mode</a></li> <li><a href="/css/css3/properties/css_opacity.cfm">opacity</a></li> <li><a href="/css/properties/css_outline.cfm">outline</a></li> <li><a href="/css/css3/properties/css_overflow.cfm">overflow</a></li> <li><a href="/css/properties/css_padding.cfm">padding</a></li> <li><a href="/css/properties/css_page.cfm">page</a></li> <li><a href="/css/properties/css_pause.cfm">pause</a></li> <li><a href="/css/css3/properties/css_perspective.cfm">perspective</a></li> <li><a href="/css/properties/css_position.cfm">position</a></li> <li><a href="/css/css3/properties/css_rest.cfm">rest</a></li> <li><a href="/css/properties/css_right.cfm">right</a></li> <li><a href="/css/properties/css_text-align.cfm">text-align</a></li> <li><a href="/css/css3/properties/css_text-decoration.cfm">text-decoration</a></li> <li><a href="/css/properties/css_text-shadow.cfm">text-shadow</a></li> <li><a href="/css/properties/css_top.cfm">top</a></li> <li><a href="/css/css3/properties/css_transform.cfm">transform</a></li> <li><a href="/css/css3/properties/css_transition.cfm">transition</a></li> <li><a href="/css/properties/css_vertical-align.cfm">vertical-align</a></li> <li><a href="/css/properties/css_visibility.cfm">visibility</a></li> <li><a href="/css/properties/css_width.cfm">width</a></li> <li><a href="/css/css3/properties/css_word-wrap.cfm">word-wrap</a></li> <li><a href="/css/properties/css_z-index.cfm">z-index</a></li> <li><a href="/css/properties/">All Properties <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_2 --> <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_1 --> <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>