Positions in CSS

To Know Before

There are three types of elements

1. Block Level
2. Inline Level
3. Inline-Block

Block-level elements

• Begin in new line.
• Occupy any available width.
• They can nested one another and may wrap inline elements also
• used for large pieces of content (Paragraphs)

Inline-level elements

• Fall into the normal flow (do not begin on new line)
• They can nested one another (But not block level elements)
• Width : Width if their content (Doesnt accept width and height)
• Used for small pieces of content()

inline-block

Accept width and height Fall into normal flow(Do not begin on new line)

Ability to place the element in body area.

We can place the element in some ways we shall explain and understand it by means of use cases.

Use Case 1 :

Position with Floats

Float :

Takes an element from HTML normal flow and place it either left or right of its parent based on the value of float.

The float property accepts the value - left, right

Remaining elements flow around the floated element.

Important points :

"Float" property alter the display property to "block" for an which has float value. "Next" element to the floated element is wrapped in the flow we need to give clear attribute.

Use Case 1 :

Paragraph floating around the image

<style>
    .car {
      float:left;
     margin-right:8px;
    }
    span {
      float: right;
      background-color: blue;
      color:white;
      width:200px;
      height:200px;
      text-align: center;
    }
  </style>

 <img class="car" src="car.jpeg" alt="Car" width="80px">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut adipisci facilis inventore voluptas dignissimos, impedit quidem dolores reprehenderit. Pariatur quod necessitatibus incidunt iusto sunt quasi similique beatae repudiandae cupiditate quo tempora dolor recusandae autem totam, dolores commodi voluptatum quas nemo rerum. Expedita ipsum doloremque deleniti aperiam nostrum consequuntur, at neque consectetur facere aliquam eum nam ipsam beatae veniam itaque quibusdam libero quis. Cumque perspiciatis exercitationem unde mollitia quisquam atque odit eligendi quae voluptatum possimus, obcaecati consectetur consequuntur harum eum facilis! Cumque velit, exercitationem deleniti quod placeat necessitatibus facere ipsum, doloribus perspiciatis nam dicta possimus modi error inventore at veniam non? itaque quibusdam libero quis. Cumque perspiciatis exercitationem unde mollitia quisquam atque odit eligendi quae voluptatum possimus, obcaecati consectetur consequuntur harum eum facilis! Cumque velit, exercitationem deleniti quod placeat necessitatibus facere ipsum, doloribus perspiciatis nam dicta possimus modi error inventore at veniam non?</p>
<img src="car.jpeg" alt="Car" width="200px">

<span>Span TAG</span>

Use Case 2 :

Header,Footer,Main Content and Sidebar

 <style>
    div {
      padding:24px 15px;
      background-color: #4d4d4d;
      border-radius: 6px;
      margin: 0 1.5% 24px 1.5%;
      color:white;
    }
    .main{
      float:left;
      width:60%;
    }
    .sidebar{
      float:right;
      width:30%;
    }
    .footer {
      /*clear:both;*/
      clear:both;
      background-color: blueviolet;
    }
  </style>

 <div class="header">Header</div>
    <div class="main">Main Content</div>
    <div class="sidebar">Side Bar</div>
    <div class="footer">Footer</div>

Removing an element from the flow of the document allows all the elements around the floated element to wrap and consume any available space around the floated element which is often undesired.

To prevent content from wrapping around floated elements, we need to clear.return the page to its normal flow.

clear : left/right/both;

Disadvantage : Styles of the floating elements and elements around it will have some undesired results. this will be rectified in Containing Floats.

Use Case 3 :

Clearing floats another method (Containing Floats) Containing floats does help to ensure that all of our styles will be rendered properly.

Floated element must reside in the parent element(Act as a container) so that flow of document will not be affected.

Parent element represented by a class (For Eg : clearfix)

.header,.section,.sidebar,.footer{
      padding:24px 12px;
      background-color:blanchedalmond;
      border-radius: 6px;
      margin-bottom: 8px;
    }


.clearfix:before,
.clearfix:after {
content : "";
display:block;
}

.clearfix:after{
clear:both;
}
.clearfix {
clear:both;
*zoom:1;
}
 .section {
      float:left;      
      width:62%;
    }
    .sidebar {
      float:right;

      width:34%;
    }

<div class="header">HEADER</div>
  <div class="clearfix">
    <div class="section">SECTION</div>
    <div class="sidebar">SIDEBAR</div>
  </div>
  <div class="footer">
    FOOTER
  </div>

clearing any floated elements within the element with the class "clearfix"

Position with inline- block

 <style>
    code {
      background: #2db34a;
      border-radius: 6px;
      color: #fff;
      display: block;
      font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
      padding: 24px 15px;
      text-align: center;
    }
    header,
    section,
    aside,
    footer {
      margin: 0 1.5% 24px 1.5%;
    }
    section {
      display: inline-block;
      width: 30%;
    }
    footer {
      margin-bottom: 0;
    }
  </style>
 <header>
    <code>&#60;header&#62;</code>
  </header>

  <section>
    <code>&#60;section&#62; <br> display: <br> inline-block;</code>
  </section><section>
    <code>&#60;section&#62; <br> display: <br> inline-block;</code>
  </section><section>
    <code>&#60;section&#62; <br> display: <br> inline-block;</code>
  </section><footer>
    <code>&#60;footer&#62;</code>
  </footer>

inline-block helpful in placing elements next to one another within a line.

height,width,padding,border,margin (no need to worry about clearing any floats)

Hint : while doing some responsive behavior decreasing width and height last element of the inline block line will be moved to next row. to overcome this behavior we need to remove space between inline block elements in HTML file

Before :

Section 1 Section 2

After :

Section 1 (Tag section immediately precede after section> Section 2

Which is best among inline-blocks or floats where to use ?

1. Inline-Block elements to create grid and layout
2. Use float when we want content wrap around given element

Uniquely Position the elements.

Using "position" property

How an element positioned in the page whether or not it will appear in the normal flow used with the help of properties top,right,bottom and left. (Box Offset Properties -These offset properties only work on elements with a relative, absolute, or fixed positioning value.)

Default is position static it exists in normal flow (Which doesnot accept Box Offset Properties)

Relative :

Normal Flow

Leaving Space for an element as intended while not allowing other elements to float around

Accept Box Offset Properties.

• Element may may overlap, or underlap, other elements
• Elements moved from its default position (where it was originally placed)

<style>
    * {
      color: #666;
      font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
    }
    div,
    .offset span {
      border-radius: 6px;
    }
    div {
      background: #eaeaed;
      height: 62px;
      padding-top: 38px;
      text-align: center;
      width: 100px;
    }
    .offset {
      background: none;
      border: 2px dashed #9799a7;
      height: 100px;
      padding: 0;
    }
    .offset span {
      background: #fe0b7d;
      color: #fff;
      display: block;
      height: 74px;
      left: 20px;
      padding-top: 26px;
      position: relative;
      text-align: center;
      top: 20px;
      width: 100px;
    }
  </style>
  <div>
   Box one
  </div>  
  <div class="offset">
    <span>Relative Box</span>
  </div>  
  <div>
   Box 2
  </div>

<style>
    .box-set {
      background: #eaeaed;
    }
    .box {

      height: 120px;
      position: relative;
      width: 120px;
    }
    .box-1 {
      background: #2db34a;
      top: 20px;
    }
    .box-2 {
      background: #f2ff01;
      left: 40px;
    }
    .box-3 {
      background: #9900ff;
      bottom: 40px;
      right: 20px;
    }
    .box-4 {
      background: #f203ff;
      bottom:70px;
    }
  </style>
<div class="box-set">
    <figure class="box box-1">Box 1</figure>
    <figure class="box box-2">Box 2</figure>
    <figure class="box box-3">Box 3</figure>
    <figure class="box box-4">Box 4</figure>
  </div>

Absolute :

<style>
    div {
      background-color: #4d4d4d;
      height:100px;
      margin:10px;
      width:100px;
      border-radius: 5px;
    }
    .offset {
      background: none;
      border : 2px dashed  blue;
      /*position:relative;*/

    }
    .offset span {
      background-color: black;
      color:white;
      display:block;
      height:100px;
      width:100px;  
      position:absolute;
      top:20px;
      left:20px;
      border-radius: 5px;
      padding:5px;      
    }
  </style>
<div></div>
  <div class="offset">
    <span>Absolute Element</span>
  </div>
  <div></div>

Taken from normal flow Element space not preserved as like relative Elements Moved in relationship based on closest relatively positioned parent. if we cant find relatively positioned parent it will move based on the body

Fixed :

<style>
    body {
      color: #fff;
      font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
    }
    div {
      background-color: rgb(0, 167, 167) ;

    }
    .box-set,
    .box {
      border-radius: 6px;
    }
    .box-set {
      background: #eaeaed;
      height: 200px;
    }
    .box {
      background: #2db34a;
      height: 80px;
      line-height: 80px;
      position: fixed; 
      text-align: center;
      width: 80px;
    }
    .box-1 {
      top: 6%;
      left: 2%;
    }
    .box-2 {
      top: 0;
      right: -40px;
    }
    .box-3 {
      bottom: -10px;
      right: 20px;
    }
    .box-4 {
      bottom: 0;
    }
    header {
      background: #2e0353;
      top: 0;
      left: 0;
      padding: 20px 0;
      position: fixed;
      right: 0;
      text-align: center;
    }
  </style>

Taken from the normal flow and its fixed to the specified box offset properties it will not be moved if you scroll the page. (usage : in many website scroll to top functionality) Element space not preserved as like relative Elements Moved in relationship based on browser viewport Common use cases

Fixed Header,Fixed Footer, Scroll to home

Z- Index

By nature web pages are often considered to be two dimensional, displaying elements upon a x and y axis. However when you begin to position elements they are occasionally placed on top of one another. To change the order of how these elements are stacked, also known as the z-axis, the z-index property is to be used.

Changing this stacking using the z-index property is pretty straight forward. The element with the highest z-index value will appear on the top regardless of its placement.

In order to apply the z-index property to an element, you must first apply a position value of relative, absolute, or fixed. The same as if you were to apply any box offset properties.

Techniques on Building Layouts and positioning content

Using floats

 <style>
    body {
      color: #fff;
      font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
    }
    .box-set,
    .box {
      border-radius: 6px;
    }
    .box-set {
      background-color: #dadada;
      overflow: auto;
    }
    .box {
      background: #2db34a;
      float: left;
      margin: 1.858736059%;
      padding: 20px 0;
      text-align: center;
      width: 29.615861214%;
    }
    .move {
      position:relative;
      top:50px;
    }
  </style>
 <div class="box-set">
    <figure class="box">Boxs 1</figure>
    <figure class="box">Boxs 2</figure>
    <figure class="box move">Boxs 3</figure>
  </div>

Using containing floats overflow : auto Overflow technique

One technique for containing floats within a parent element is to use the CSS overflow property. Setting the overflow property value to auto within the parent element will contain the floats, resulting in an actual height for the parent element,

Disadvantages :

Styles to floated element for eg move or position the element may cause some wierd effect.

Clearfix technique :

Its a better technique than overflow.

1. create hidden elements before and after the parent which is containing floats.
2. The :before pseudo-element is used to prevent the top margin of child elements from collapsing
3. The :after pseudo-element is used to prevent the bottom margin of child elements from collapsing + to clear the nested floats.