位置绝对不工作在位置固定内

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、relative或absolute定位时，你需要定义top、right、bottom或left属性。

#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>

Answer 2

你在寻找类似的东西吗？

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

#main {
  position: fixed;
  width: 100px;
  height: 100px; 
  border: 1px solid #000;
  top: 50px;
  left: 10px;
}
#inner {
  position: absolute;
  width: 10px;
  height: 10px; 
  border: 1px solid #f00;
//  top: 0px;
//  left: 0px;
  top: 10px;
  left: 10px;
}

Answer 3

position:absolute将根据其父div的位置属性工作。但是position:fixed总是会根据用户视口的位置，无论元素驻留在何处。（对其父元素不重要）

在示例中，#main 处于fixed位置。并为其分配一个200px left属性。因此，它将向视口左200px，#inner 也有一个 left：100px，但它需要从 #main 的父级向左移动 100px。如果内部也有固定位置，它将从视口向左移动。（取消注释代码笔中的注释代码以查看其运行情况）

.HTML

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

.CSS

#main {
  position: fixed;
  background: #cc3;
  width: 500px;
  height: 500px;
  left: 200px;
}
#inner {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #1d3;
  left: 100px;
  top:100px;
}

http://codepen.io/asim-coder/pen/LZNxJM

Answer 4

这可能有助于您：

    #main{ 
  background:#ccc; 
  width:300px;
  height:300px
}  
#inner{
   background:#fff; 
   text-align:center;
   margin:20px; 
   padding:20px
}
<div id="main" style="position: fixed">
   <div id="inner" style="position: absolute">
     inner div
   </div>
</div>

这是jsfiddle代码：https://jsfiddle.net/awvov63a/