Maths functions helps us in fighting dimensions of elements or screen autonomously and thus helps in the responsiveness of a website.
&nbsp;
<h4 dir="ltr">Calc() Function</h4>
Calculates the value generally width of a particular property.
Eg:
<pre class="language-css"><code>width: calc(100%-20px);</code></pre>
&nbsp;
This function will automatically subtract 20px from whatever is the 100% width of that container on the website. This way you can space your elements well without hassles.
&nbsp;
<h4 dir="ltr">Max &amp; Min Functions</h4>
This function takes two parameters and gives the result out of one accordingly.
Eg:
<pre class="language-css"><code>width: max(50px, 50%);</code></pre>
&nbsp;
Out of these two whichever would be greater, would be assigned as a value to the width; vice versa happens for the minimum function.
&nbsp;

CSS Maths Functions

The CSS positions allow you to precisely control the placement of an element on the web page.
It helps to determine how elements are placed inside the container element and how they interact with the other elements on the page.
There are various types of position property values, such as:
<h2>Static(Default)</h2>
The elements are positioned according to the normal flow of the document.
Syntax:
<pre class="language-css"><code>selector {
 position: static;
}</code></pre>
&nbsp;Example:
<pre class="language-markup"><code>&lt;head&gt;
 &lt;style&gt;
 img {
 position: static;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p id="p1"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
 &lt;p id="p2"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
 &lt;img src="./logo.png" alt="logo"&gt;
 &lt;p id="p3"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
 &lt;p id="p4"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-positioning/static.png" alt="cwh tutorial image" width="630">
<h2>Relative</h2>
Elements are positioned relative to the normal position in the document.
You can use the top, right, bottom, and left properties to move the element from its original position.
Syntax:
<pre class="language-css"><code>selector {
 position: relative;
}</code></pre>
Example:
<pre class="language-markup"><code>&lt;head&gt;
 &lt;style&gt;
 img {
 position: relative;
 left: 100px;
 top: 50px
 }
 &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;p id="p1"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
 &lt;p id="p2"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
 &lt;img src="./logo.png" alt="logo"&gt;
 &lt;p id="p3"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
 &lt;p id="p4"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-positioning/relative.png" alt="cwh tutorial image" width="630">
Here you can see that the image is repositioned from its original place, and the gap is not filled by another element.
<h2>Absolute</h2>
Elements are positioned relative to the closest positioned ancestor (parent), which means we need to have a parent element with a positioning other than 'static'.
Note: An absolutely positioned element is removed from the normal flow.
Example:
<pre class="language-markup"><code>&lt;head&gt;
 &lt;style&gt;
 #about{
 position: relative;
 }
 .logo{
 position: absolute;
 right: 10px;
 top: 10px;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
 &lt;div class="about"&gt;
 &lt;p&gt;Developer&lt;/p&gt;
 &lt;p&gt;founder of CodeWithHarry&lt;/p&gt;
 &lt;img class="logo" src="./logo.png" alt="logo"&gt;
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-positioning/absolute_pre.png" alt="cwh tutorial image" width="630">
Explanation:
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-positioning/absolute.png" alt="cwh tutorial image" width="630">
Here, as we have set position relative to the body and absolute to the about section, the about section position can be manipulated with the left of top, left, right, and bottom.
<h2>Fixed</h2>
Elements are positioned relative to the viewport (screen) and do not move when the page is scrolled.
This is useful for creating elements like fixed headers or footers.
Example:
<pre class="language-markup"><code>&lt;head&gt;
 &lt;style&gt;
 h1{
 position: fixed;
 top: 10px;
 right: 20px;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-positioning/fixed.png" alt="cwh tutorial image" width="630">
Here, the image position will be fixed.
<h2>Float</h2>
The float property is used to shift an element to the left or right within its containing element. For more details, follow&nbsp;<a href="../../../tutorial/css-float/" target="_blank" rel="noopener">CSS Float</a>.
<h2>Sticky</h2>
Position sticky is a hybrid between 'relative' and 'fixed'.
It allows an element to become "stuck" to the top or bottom of its container when scrolling, but it behaves like relative positioning within the container until it reaches a specified offset.
Example:
<pre class="language-markup"><code>&lt;head&gt;
 &lt;style&gt;
 h1{
 position: sticky;
 top: 10px;
 right: 20px;
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

CSS Positioning

We&rsquo;ve seen various units in CSS so far used for many different purposes; we did hit and trial to find the correct dimensions of that unit for our website.&nbsp;
&nbsp;
But now let&rsquo;s understand how units work in CSS.&nbsp;
&nbsp;
<h4 dir="ltr">Absolute Units.</h4>
<ol>
<li dir="ltr" role="presentation">cm - centimetres (1 cm = 37.8 px)</li>
<li dir="ltr" role="presentation">mm - millimetres</li>
<li dir="ltr" role="presentation">in - inches (1 in = 96 px = 2.54cm)</li>
<li dir="ltr" role="presentation">pt - points (1pt = 1/72th of 1 in)</li>
<li dir="ltr" role="presentation">pc - picas (1pc = 1/6th of 1 in)</li>
<li dir="ltr" role="presentation">px - pixel (1px = 1/96th of 1 in)</li>
</ol>
Generally we only use pixels to set dimensions of an element.
&nbsp;
<h4 dir="ltr">Relative Units</h4>
<ol>
<li dir="ltr" role="presentation">em - Relative to the font size of the parent element. Eg: 5em means the size would be 5 times the current font size.</li>
<li dir="ltr" role="presentation">ex - Relative to X height of the existing font</li>
<li dir="ltr" role="presentation">ch - Relative to the width/ radius of the character &ldquo;0&rdquo;.</li>
<li dir="ltr" role="presentation">rem - Relative to the font size of the root element.</li>
<li dir="ltr" role="presentation">vw - Relative to 1% of the width of the viewport. (Viewport is the area of the website visible to the user.)</li>
<li dir="ltr" role="presentation">vh -&nbsp; Relative to 1% of the height of the viewport</li>
<li dir="ltr" role="presentation">% - Relative to the parent element&rsquo;s size.</li>
</ol>
&nbsp;
Apart from this some of the other metrics used in CSS are-&nbsp;
<ol>
<li dir="ltr" role="presentation">Opacity: Ranges from 0 to 1</li>
<li dir="ltr" role="presentation">RGB &amp; RGBA values: 0 to 255</li>
<li dir="ltr" role="presentation">HSL &amp; HSLA values: 0 to 360</li>
</ol>
&nbsp;

CSS Size