5.1: Static

Static positioning is an element's default position

• It will remain on the page according to normal flow of page.

• It WILL NOT be affected by other positional properties and values.

Copy and paste

<div class="squareGreen"></div>

.squareGreen{
  position: static;
  width: 200px;
  height: 200px;
  background: #58D68D;
}

Add a margin of 100px Add a top value of 100px

What happens? In which case does it move and in which does it not?

This is all well and good but doesn't demonstrate static positioning very well as it relates to other items, so add the following code adding a document and then duplicate the html and place it below the last </div>. You should have to <div> blocks.

<div class="wrapper">

</div>

body{
  background: #eee;
}
.wrapper {
  position: absolute;
  width: 70em;
  height: 70em;
  margin: 300px;
  background: #D6EAF8;
  -webkit-box-shadow: 0px 40px 60px -20px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 40px 60px -20px rgba(0, 0, 0, 0.2);
}

Notice how the square is in the same position according to the document.

Explore More

1. Play around with the margin property on both the wrapper and the square.

Toggle this property on & off and notice how the static green square reacts.