13hoop/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
* {
  border: 1px solid gray;
}

.wrapper {
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
  height: 1000px;
}

.main1 {
  background: #aaa;
  position: relative;
  left: 40px;
}

.main2 {
  background: #3ae;
}

.main3 {
  background: #bfe;
  position: fixed;
  max-width: 100px;
  bottom: 0px;
  left: 0px;
}

.fa {
  color: yellow;
  position: relative;
  left: -2px;
  background: red;
}

.son {
  background: #000;
  color: white;
  position: absolute;
  top: 17px;
  right: 80px;
  left: 80px;
}

.clear {
  clear: both;
  content: '';
  display: block;
}
</style>
</head>
<body>
    <div class="wrapper">
	  this is relative demo
      <p class="main1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!</p>
      this is static
      <p class="main2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!</p>
      <p class="main3">This is fixed! This is fixed! This is fixed! This is fixed! This is fixed!</p>

      <hr>
      <div class="fa">
         ----- father relavite here, 但是div不再包裹p了 -------
         <p class="son">this is absolute position. this is absolute position. this is absolute position. this is absolute position. this is absolute position</p>
      </div>
  </div>


<script id="jsbin-source-css" type="text/css">* {
  border: 1px solid gray;
}

.wrapper {
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
  height: 1000px;
}

.main1 {
  background: #aaa;
  position: relative;
  left: 40px;
}

.main2 {
  background: #3ae;
}

.main3 {
  background: #bfe;
  position: fixed;
  max-width: 100px;
  bottom: 0px;
  left: 0px;
}

.fa {
  color: yellow;
  position: relative;
  left: -2px;
  background: red;
}

.son {
  background: #000;
  color: white;
  position: absolute;
  top: 17px;
  right: 80px;
  left: 80px;
}

.clear {
  clear: both;
  content: '';
  display: block;
}
</script>
</body>
</html>

## jsbin.ladana.css
* {
  border: 1px solid gray;
}

.wrapper {
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
  height: 1000px;
}

.main1 {
  background: #aaa;
  position: relative;
  left: 40px;
}

.main2 {
  background: #3ae;
}

.main3 {
  background: #bfe;
  position: fixed;
  max-width: 100px;
  bottom: 0px;
  left: 0px;
}

.fa {
  color: yellow;
  position: relative;
  left: -2px;
  background: red;
}

.son {
  background: #000;
  color: white;
  position: absolute;
  top: 17px;
  right: 80px;
  left: 80px;
}

.clear {
  clear: both;
  content: '';
  display: block;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	* {
	border: 1px solid gray;
	}

	.wrapper {
	max-width: 300px;
	margin: 0 auto;
	text-align: center;
	height: 1000px;
	}

	.main1 {
	background: #aaa;
	position: relative;
	left: 40px;
	}

	.main2 {
	background: #3ae;
	}

	.main3 {
	background: #bfe;
	position: fixed;
	max-width: 100px;
	bottom: 0px;
	left: 0px;
	}

	.fa {
	color: yellow;
	position: relative;
	left: -2px;
	background: red;
	}

	.son {
	background: #000;
	color: white;
	position: absolute;
	top: 17px;
	right: 80px;
	left: 80px;
	}

	.clear {
	clear: both;
	content: '';
	display: block;
	}
	</style>
	</head>
	<body>
	<div class="wrapper">
	this is relative demo
	<p class="main1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!</p>
	this is static
	<p class="main2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!</p>
	<p class="main3">This is fixed! This is fixed! This is fixed! This is fixed! This is fixed!</p>

	<hr>
	<div class="fa">
	----- father relavite here, 但是div不再包裹p了 -------
	<p class="son">this is absolute position. this is absolute position. this is absolute position. this is absolute position. this is absolute position</p>
	</div>
	</div>


	<script id="jsbin-source-css" type="text/css">* {
	border: 1px solid gray;
	}

	.wrapper {
	max-width: 300px;
	margin: 0 auto;
	text-align: center;
	height: 1000px;
	}

	.main1 {
	background: #aaa;
	position: relative;
	left: 40px;
	}

	.main2 {
	background: #3ae;
	}

	.main3 {
	background: #bfe;
	position: fixed;
	max-width: 100px;
	bottom: 0px;
	left: 0px;
	}

	.fa {
	color: yellow;
	position: relative;
	left: -2px;
	background: red;
	}

	.son {
	background: #000;
	color: white;
	position: absolute;
	top: 17px;
	right: 80px;
	left: 80px;
	}

	.clear {
	clear: both;
	content: '';
	display: block;
	}
	</script>
	</body>
	</html>