绝对位置在固定位置内不起作用答案

【问题标题】：Position absolute not working inside position fixed绝对位置在固定位置内不起作用
【发布时间】：2016-06-13 07:19:57
【问题描述】：

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

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

【问题讨论】：

你会发布一些演示吗？

标签： html css position styles

【解决方案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>

【讨论】：

【解决方案2】：

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

在示例中，#main 位于 fixed 位置。并分配给它一个 200px left 属性。所以它需要一个200px 到视口，其中 #inner 也有一个 left:100px，但它会从 parent 离开 100px，即 #main。如果内部也有固定位置，它将从视口向左。（取消注释 codepen 中的注释代码以查看它的实际效果）

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

【讨论】：

我尝试添加 top 和 left 值。但对我不起作用！ :(

【解决方案3】：

你在寻找类似的东西吗？

<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;
}

【讨论】：

【解决方案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/

【讨论】：