CSS Positions
Published: 2022-12-24 15:11:50

<blockquote>
<p>Hi Friends, I have written a blog on CSS Positioning, hope it will easy to read and understand.</p>
</blockquote>
<h3 id="heading-css-positions-property-with-example">CSS Positions Property with Example</h3>
<h4 id="heading-position-property-has-5-values">Position Property has 5 values-</h4>
<ul>
<li>Static</li>
<li>Relative</li>
<li>Absolute</li>
<li>Fixed</li>
<li>Sticky</li>
</ul>
<h3 id="heading-sticky-position">Sticky Position</h3>
<ul>
<li>It is default position of every element.</li>
<li>Explanation- lets take a box and we can see there will be no change in box position.<blockquote>
<p>by applying static position nothing is change.</p>
</blockquote>
</li>
</ul>
<pre><code><span class="hljs-comment">//HTML Code-</span>
<span class="hljs-operator">&lt;</span>body<span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span>div class<span class="hljs-operator">=</span><span class="hljs-string">"container"</span><span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span>div class<span class="hljs-operator">=</span><span class="hljs-string">"child"</span><span class="hljs-operator">&gt;</span><span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>div<span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>div<span class="hljs-operator">&gt;</span>
<span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>body<span class="hljs-operator">&gt;</span>

<span class="hljs-comment">//CSS Code-</span>
<span class="hljs-operator">*</span>{
  margin:<span class="hljs-number">0</span>;
  padding:<span class="hljs-number">0</span>;
  box<span class="hljs-operator">-</span>sizing: border<span class="hljs-operator">-</span>box;   
}
.container{
  height:100px;
  width:100px;
  border:1px solid black;
  background<span class="hljs-operator">-</span>color:lightgreen;
  position:static;
}
</code></pre><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1652202037386/Q_dMvurO-.JPG" alt="static.JPG" /></p>
<h3 id="heading-relative-andamp-absolute">Relative &amp; Absolute</h3>
<p>Both works in same way except that</p>
<ul>
<li>Relative -&gt; works on Parent Class</li>
<li>Absolute -&gt; words on Children class</li>
</ul>
<p>Explanation- lets take a box means we are working only on container, child is not in role till now.</p>
<blockquote>
<p>After applying position relative we can see box moved 100px from left.</p>
</blockquote>
<pre><code><span class="hljs-comment">//HTML Code-</span>
<span class="hljs-operator">&lt;</span>body<span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span>div class<span class="hljs-operator">=</span><span class="hljs-string">"container"</span><span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span>div class<span class="hljs-operator">=</span><span class="hljs-string">"child"</span><span class="hljs-operator">&gt;</span><span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>div<span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>div<span class="hljs-operator">&gt;</span>
<span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>body<span class="hljs-operator">&gt;</span>

<span class="hljs-comment">//CSS Code-</span>
<span class="hljs-operator">*</span>{
  margin:<span class="hljs-number">0</span>;
  padding:<span class="hljs-number">0</span>;
  box<span class="hljs-operator">-</span>sizing: border<span class="hljs-operator">-</span>box;   
}
.container{
  height:100px;
  width:100px;
  border:1px solid black;
  background<span class="hljs-operator">-</span>color:lightgreen;
  position:relative;
  left:100px;
}
</code></pre><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1652202605483/ofMmNdqqJe.JPG" alt="Relative.JPG" /></p>
<h3 id="heading-relative-vs-absolute">Relative vs Absolute</h3>
<p>Now lets take a children to explain it. child box moved 100px from its parent means outer box as seen in below image.</p>
<pre><code><span class="hljs-comment">//HTML Code-</span>
<span class="hljs-operator">&lt;</span>body<span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span>div class<span class="hljs-operator">=</span><span class="hljs-string">"container"</span><span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span>div class<span class="hljs-operator">=</span><span class="hljs-string">"child"</span><span class="hljs-operator">&gt;</span><span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>div<span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>div<span class="hljs-operator">&gt;</span>
<span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>body<span class="hljs-operator">&gt;</span>

<span class="hljs-comment">//CSS Code-</span>
<span class="hljs-operator">*</span>{
  margin:<span class="hljs-number">0</span>;
  padding:<span class="hljs-number">0</span>;
  box<span class="hljs-operator">-</span>sizing: border<span class="hljs-operator">-</span>box;   
}
.container{
  height:300px;
  width:300px;
  border:1px solid black;
  background<span class="hljs-operator">-</span>color:lightgreen;
  position:relative;
}
.child{
  width:100px;
  height:100px;
  background<span class="hljs-operator">-</span>color:pink;
  border:1px solid black;
  position:absolute;
  left:100px
}
</code></pre><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1652203388373/teGO8pki0.JPG" alt="Relative vs absolute.JPG" /></p>
<blockquote>
<ul>
<li>Suppose we are giving relative position to body not the parent box then output will be shown like below. here we are assuming that parent box is in middle of the page</li>
</ul>
</blockquote>
<pre><code><span class="hljs-selector-tag">body</span> {
  <span class="hljs-attribute">position</span>: relative;
}
<span class="hljs-selector-class">.container</span> {
  <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
  <span class="hljs-attribute">margin</span>:auto;
  <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;
  <span class="hljs-attribute">background-color</span>: lightgreen;
}
<span class="hljs-selector-class">.child</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
  <span class="hljs-attribute">background-color</span>: pink;
  <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">left</span>: <span class="hljs-number">100px</span>;
}
</code></pre><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1652203924868/F0nQjaBqa.JPG" alt="bodyrelative.JPG" /></p>
<blockquote>
<p>Fixed Position
After applying fixed position to the box it has fixed at its given position. Even we scroll, it will no move from its fixed position i.e. 100px from top and 200px from left. </p>
</blockquote>
<pre><code><span class="hljs-comment">//HTML Code-</span>
<span class="hljs-operator">&lt;</span>body<span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span>div class<span class="hljs-operator">=</span><span class="hljs-string">"container"</span><span class="hljs-operator">&gt;</span>
    <span class="hljs-operator">&lt;</span>p<span class="hljs-operator">&gt;</span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
     Tempore, soluta?<span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>p<span class="hljs-operator">&gt;</span>
  <span class="hljs-operator">&lt;</span>div class<span class="hljs-operator">=</span><span class="hljs-string">"child-box"</span><span class="hljs-operator">&gt;</span><span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>div<span class="hljs-operator">&gt;</span>
   <span class="hljs-operator">&lt;</span>p<span class="hljs-operator">&gt;</span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
    Tempore, soluta?<span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>p<span class="hljs-operator">&gt;</span>
<span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>div<span class="hljs-operator">&gt;</span>
<span class="hljs-operator">&lt;</span><span class="hljs-operator">/</span>body<span class="hljs-operator">&gt;</span>

<span class="hljs-comment">//CSS Code-</span>
.container {
  height: 1000px;
}
.child-box {
  width: 100px;
  height: 100px;
  background<span class="hljs-operator">-</span>color: pink;
  border: 1px solid black;
  position: <span class="hljs-keyword">fixed</span>;
  top:100px;
  left: 200px;
}
</code></pre><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1652205106060/XyoTndzFj.JPG" alt="Fixed.JPG" /></p>
<h3 id="heading-sticky-position">Sticky Position</h3>
<pre><code><span class="hljs-comment">//CSS Code-</span>
<span class="hljs-selector-class">.child-box</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
  <span class="hljs-attribute">background-color</span>: pink;
  <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;
  <span class="hljs-attribute">position</span>: sticky;
  <span class="hljs-attribute">top</span>:<span class="hljs-number">10px</span>;
  <span class="hljs-attribute">left</span>: <span class="hljs-number">200px</span>;
}
</code></pre><p>We can understand by below example-</p>
<ul>
<li>After applying sticky position to the box- if we check without scrolling it will remain at its original position means 200px from left.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1652206543843/hMPAQCFvW.JPG" alt="stickoriginal.JPG" /></p>
<ul>
<li>But when we check with scrolling, box moves up but when it reached at given position means 10px from top then it sticks there.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1652206636551/j_RPf5JPF.JPG" alt="stickmove.JPG" /></p>
</br><p style="color:#757CF9;">This article is published w/ <a target="_blank" href="https://scattr.io?ref=dev">Scattr  ↗️</a></p>