html - 绝对位置在固定位置内不起作用

Question

<div id="main" style="position: fixed">
   <div id="inner" style="position: absolute">
   </div>
</div>

main 和inner 容器都采用position: fixed。如何使用 position:absolute 制作内部容器和使用 position:fixed 制作主容器？

Answer 1

使用fixed<时需要定义top, right, bottom or left 属性、relative 或 absolute 元素定位。

#main {
  background: #000;
  position: fixed;
  height: 300px;
  width: 200px;
  left: 20px;
  top: 10px;
}
#inner {
  background: #f00;
  position: absolute;
  height: 100px;
  width: 100px;
  left: 10px;
  top: 10px;
}

<div id="main">
   <div id="inner">
   </div>
</div>