Tryit Editor v3.6

<!DOCTYPE html>
<html>
<head>
<style>
#parent1 {
  position: static;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
}

#child1 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

#parent2 {
  position: relative;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
}

#child2 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

#parent3 {
  position: absolute;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
  top: 750px;
  right: 15px;
}

#child3 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

#parent4 {
  position: fixed;
  border: 1px solid blue;
  background-color: rgba(255,200,200,0.5);  
  width: 300px;
  height: 100px;
  bottom: 0;
  left: 0;
  right: 0;
}

#child4 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}
</style>
</head>
<body>

<h1>The position property</h1>

<h2>position: static;</h2>
<p>The Parent1 element has position: static, and will remain in the natural flow of the page.
It will NOT act as anchor point for the absolutely positioned Child1 element:</p>
<div id="parent1">Parent1: position: static.
  <div id="child1">Child1: position: absolute, right: 15px, top: 70px</div>
</div>

<h2>position: relative;</h2>
<p>The Parent2 element has position: relative, and will remain in the natural flow of the page.
It will also act as anchor point for the absolutely positioned Child2 element:</p>
<div id="parent2">Parent2: position: relative.
  <div id="child2">Child2: position: absolute, right: 15px, top: 70px</div>
</div>

<h2>position: absolute;</h2>
<p>The Parent3 element has position: absolute, and will NOT remain in the natural flow of the page.
It will position itself according to the closest positioned ancestor.
It will also act as anchor point for the absolutely positioned Child3 element:</p>
<div id="parent3">Parent3: position: absolute, top: 750px, right: 15px.
  <div id="child3">Child3: position: absolute, right: 15px, top: 70px</div>
</div>

<h2>position: fixed;</h2>
<p>The Parent4 element has position: fixed, and will NOT remain in the natural flow of the page.
It will position itself according to the viewport.
It will also act as anchor point for the absolutely positioned Child4 element:</p>
<div id="parent4">Parent4: position: fixed, bottom: 0, left: 0, right: 0.
  <div id="child4">Child4: position: absolute, right: 15px, top: 70px</div>
</div>

</body>

</html>

Save to Google Drive

Open from Google Drive

Report a Problem: