dy {
	  margin: 100px auto;
  }

  .parent {
	    width: 500px;
	      border: 1px solid red;
	        margin: auto;
		  text-align: center;
	  }

	  .child {
		    border-radius: 10%;
		      width: 100px;
		        height: 100px;
			  margin: 20px;
		  }

		  .one {
			    background-color: powderblue;
		    }

		    .two {
			      background-color: royalblue;
		      }

		      .three {
			        background-color: sienna;
			}

			.four {
				  background-color: slateblue;
			  }

			  Now, you can move the first square to the left by updating the CSS like this:

			  .one {
				    background-color: powderblue;
				      position: relative;
				        right: 50px;
				}

			The second square can appear on top of the first one:

		.one {
		  background-color: powderblue;
	    position: relative;
    top: 150px;
}

.two {
	  background-color: royalblue;
	    position: relative;
	      bottom: 120px;
      }


      What is position absolute in CSS?
      If you update the CSS rule for the first square to the following:

      .one {
	        background-color: powderblue;
		  position: absolute;
	  }
	  You'll get this result:

	  This is unexpected behavior. The second square has completely disappeared.

	  If you also add some offset properties like this:

	  .one {
	    background-color: powderblue;
	      position: absolute;
	        top: 50px;
		  left: 0;
		  }

		  Well now the square has completely abandoned it's parent