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

使用top，right或bottom时，您需要定义left，fixed，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>

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

这可能会对您有所帮助：

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

Answer 4

position:absolute将根据其父div的位置属性生效。但是position:fixed始终会根据用户视图端口占据它的位置，无论元素位于何处。（不重视它的父元素）

在示例 #main 处于fixed位置。并为其分配了200px left属性。因此，视口左侧需要200px，其中 #inner 也有左边：100px，但是父需要剩下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

位置绝对不在内部位置固定

4 个答案: