HTML 在线编辑器| BEGTUT.COM

<!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>position 属性</h1>

<h2>position: static;</h2>
<p>Parent1 元素具有 position: static，并将保留在页面的自然流中。
它不会充当绝对定位的 Child1 元素的锚点：</p>
<div id="parent1">Parent1: position: static。
  <div id="child1">Child1: position: absolute, right: 15px, top: 70px</div>
</div>

<h2>position: relative;</h2>
<p>Parent2 元素具有 position: relative，并将保留在页面的自然流中。
它还将充当绝对定位的 Child2 元素的锚点：</p>
<div id="parent2">Parent2: position: relative.
  <div id="child2">Child2: position: absolute, right: 15px, top: 70px</div>
</div>

<h2>position: absolute;</h2>
<p>Parent3 元素具有 position: absolute，并且不会保留在页面的自然流中。
它将根据最近定位的祖先定位自己。
它还将充当绝对定位的 Child3 元素的锚点：</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>Parent4 元素的位置是固定的，不会保留在页面的自然流中。
它会根据视口定位自己。
它还将充当绝对定位的 Child4 元素的锚点：</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>