CSS Positioning

<!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 positioning, position, absolute, relative, image, div, list code, style, stylesheets, cascading style sheets"> <meta name="Description" content="Learn about the CSS positioning properties and how to add them to your website."> <link rel="canonical" href="https://www.quackit.com/css/tutorial/css_positioning.cfm"> <title>CSS Positioning</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>  <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 Positioning</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/css/tutorial/css_lists.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> CSS Lists</a></li> <li><a href="/css/tutorial/css_float.cfm">CSS Float <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">Use CSS positioning to specify how an element is positioned and where it should be located on the page.</p> <p>The term "CSS positioning" typically refers to using the <a href="/css/properties/css_position.cfm"><code>position</code></a> property to specify how an element is positioned. For example, you can specify whether you want the element positioned relative to its natural position in the page, in an absolute position (taken out of the normal flow), in a fixed position, etc.</p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>Relative Positioning</h2> <p>To perform relative positioning in CSS you use <code>position:relative;</code> followed by the desired offset from either <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> or <a href="/css/properties/css_left.cfm"><code>left</code></a>.</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 div {
 position: relative;
 left: 50px;
 background-color: gold;
 width: 90px;
 }
</style>

<p>Here is the normal flow of content...</p>
<div>
 This div has relative positioning.
</div>
<p>...and here is more content...</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_positioning_relative_example" 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: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>This example offsets the element 80 pixels from the left of where it would have been. If we had specified <a href="/css/properties/css_top.cfm"><code>top</code></a>, it would appear 80 pixels below where it would have been. It's important to note that other elements are not affected by this element's offset. Therefore, overlapping may occur.</p> <h2>Absolute Positioning</h2> <p>To perform absolute positioning in CSS you again use the <a href="/css/properties/css_position.cfm"><code>position</code></a> property. Only, this time you use use <code>position:absolute;</code> followed by the desired offset.</p> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 div {
 position: absolute;
 top: 100px;
 left: 60px;
 background-color: gold;
 width: 90px;
 padding: 20px;
 }
</style>

<div>
 This div is absolutely positioned 100 pixels from the top and 60 pixels from the left of its containing block.
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_positioning_absolute_example" 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 exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Fixed Positioning</h2> <p>Fixed positioning allows you to fix the position of an element to a particular spot on the page - regardless of scrolling.</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>
<style>
 .absolute {
 position: absolute;
 top: 500px;
 left: 60px;
 height: 2000px;
 background-color: limegreen;
 }
 .fixed {
 position: fixed;
 top: 10px;
 left: 10px;
 background-color: gold;
 width: 90px;
 padding: 20px;
 }
</style>

<div class="absolute">
This tall div is absolutely positioned 500 pixels from the top and 60 pixels from the left of its containing block.
</div>


<div class="fixed">
 This div is using a fixed position of 100 pixels from the top and 60 pixels from the left of its containing block. When this page scrolls, this box will remain in a fixed position - it won't scroll with the rest of the page. Go on - SCROLL!
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/tutorial/css_positioning_fixed_example" 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 exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <ul class="pager"> <li><a href="/css/tutorial/css_lists.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> CSS Lists</a></li> <li><a href="/css/tutorial/css_float.cfm">CSS Float <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/tutorial/">CSS Tutorial</a></h3> <ul> <li><a href="/css/tutorial/css_introduction.cfm">Introduction to CSS</a></li> <li><a href="/css/tutorial/css_syntax.cfm">CSS Syntax - How to Code CSS</a></li> <li><a href="/css/tutorial/implementing_css.cfm">How to add CSS to a Website</a></li> <li><a href="/css/tutorial/css_class.cfm">CSS Class Selectors</a></li> <li><a href="/css/tutorial/css_id.cfm">CSS ID Selectors</a></li> <li><a href="/css/tutorial/css_font.cfm">CSS Font Properties</a></li> <li><a href="/css/tutorial/css_text.cfm">CSS Text Properties</a></li> <li><a href="/css/tutorial/css_height_width.cfm">CSS Height & Width Properties</a></li> <li><a href="/css/tutorial/css_background_code.cfm">CSS Background Code</a></li> <li><a href="/css/tutorial/css_border.cfm">CSS Border Properties</a></li> <li><a href="/css/tutorial/css_margin.cfm">CSS Margin Properties</a></li> <li><a href="/css/tutorial/css_padding.cfm">CSS Padding Properties</a></li> <li><a href="/css/tutorial/css_lists.cfm">How to Style Lists</a></li> <li><a href="/css/tutorial/css_positioning.cfm">CSS Positioning</a></li> <li><a href="/css/tutorial/css_float.cfm">CSS Float</a></li> <li><a href="/css/tutorial/css_layers.cfm">CSS Layers</a></li> <li><a href="/css/tutorial/css_flexbox_and_grid.cfm">CSS Flexbox & Grid</a></li> <li><a href="/css/tutorial/css_summary.cfm">CSS Summary</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">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <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>

CINXE.COM

CSS Positioning