CSS position: relative;

---

<p>The <em>position: relative</em>; property allows you to position element relative to its normal position. You can try to run the following code to implement CSS position: relative;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/FPmvWf" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;div { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 20px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 3px solid blue; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Positioning Element&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;div element with position: relative; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p><img src="https://www.tutorialspoint.com/assets/questions/media/8486/posting_element.jpg" class="fr-fic fr-dib" width="558" height="150"></p>

• Related Questions & Answers
• CSS Relative units
• Relative Positioning with CSS
• Relative Positioning in CSS
• Relative Length Units in CSS
• Relative Positioning Working in CSS
• CSS Absolute and Relative Units
• CSS position: static;
• CSS position: fixed;
• CSS position: absolute;
• CSS position: sticky;
• Understanding CSS Absolute and Relative Units
• How to add components with a Relative X Position in Java
• How to add components with a relative Y position in Java?
• How to set div position relative to another div in JavaScript?
• Role of CSS position: sticky;