css 在线编辑器 | css代码测试

<!DOCTYPE html>
<html>
<head>
<style>div.parent {
  position: relative;
  height: 200px;
  border: 3px solid red;
}

div.absolute {
  position: absolute;
  width: 50%;
  bottom: 10px;
  border: 3px solid #8AC007;
}

div.relative {
  position: relative;
  width: 50%;
  bottom: 5px;
  border: 3px solid #8AC007;
}

div.fixed {
  position: fixed;
  width: 50%;
  bottom: 10px;
  border: 3px solid #8AC007;
}

div.sticky {
  position: sticky;
  width: 50%;
  bottom: 10px;
  border: 3px solid #8AC007;
} 
</style>
</head>
<body>

<h1>bottom 属性</h1>

<div class="parent">这个div 元素有 position: relative;
   <div class="absolute"><strong>position: absolute and bottom 10px</strong><br>这个 div 的底边位于包含元素的底边上方 10 像素处。</div>
</div>
<br>

<div class="parent">这个div 元素有 position: relative;
   <div class="relative"><strong>position: relative and bottom 5px</strong><br>这个 div 的底部边缘比它的正常位置高 5 个像素。</div>
</div>
<br>

<div class="fixed"><strong>position: fixed and bottom 10px</strong><br>这个 div 的底部边缘距离视口底部 10 像素。</div>

<div class="parent">这个div 元素有 position: relative;
   <div class="sticky"><strong>position: sticky and bottom 10px</strong><br>这个 div 是粘性的。</div>
</div>

</body>
</html>

报个问题: