转自：http://t.zoukankan.com/qqfontofweb-p-7813718.html
在项目中，遇到了一个场景，需要实现相对于父元素的fixed定位：在父元素内拖动滚动条时，"fixed"定位的元素不能滑动，在外层拖动滚动条时，父元素及父元素内的所有元素跟着一起滑动。但是position: fixed是相对于窗口进行的定位，不能直接实现我们需要的效果。
我们想让特定子元素相对于父元素"fixed"定位，也就是说，剩余的子元素不定位。那我们可以分开来想，如果添加一个祖先元素assistor，有两个祖先元素，一个用于辅助定位，一个用于包裹不定位的内容，这个问题不就解决了吗。像这样
实质上是child相对于assistorabsolute定位，parent内的内容自己负责展示。只要assistor和parent一样大，看起来就像是子元素child相对于父元素parent固定定位了。具体原理是position: absolute;的元素会相对于第一个设置了position: relative;的祖先元素进行定位，我们将assistor设置为position: reletive;，滚动条是在parent中的，这样"fixed"定位和parent内的内容滚动就都实现了。
<div class="assistor">
<div class="parent">
<div class="child"></div>
<div class="placeholder"></div>
</div>
</div>
.assistor {
position: relative; /*关键点*/
display: block;
500px;
height: 300px;
margin: 100px auto 0 auto;
background-color: #ddd;
}
.parent {
500px;
height: 300px;
background-color: #888;
overflow: auto; /*关键点*/
}
.child {
position: absolute; /*关键点*/
120px;
height: 120px;
margin: 100px 50px;
background-color: #333;
}
.placeholder {
1000px;
height: 1000px;
}
以上为转载，一下为实际情况。
我的需求是一个信封的图标，右上角有一个数字，也就是显示有几条未读消息的样式。我想让数字一直与信封的图标都是固定位置，不论窗口放大或缩小。参考上面文章，我设计的结构为：
<li>
<a href="#">
<img src="xxx.png" />
<div class="top-notice-num"></div>
</a>
</li>
我设置为以下样式即可：
li a{
text-decoration: none;
color: #fff;
font-weight: 500;
font-size: 1.1em;
padding: 10px 5px;
position: relative;
}
.top-notice-num {
position: absolute;
color: white;
font-size: 12px;
background-color: red;
min-height: 14px;
min-width:14px;
line-height: 11px;
right:21%;
top: 5%;
text-align: center;
-webkit-border-radius: 24px;
border-radius: 24px;
padding:2px;
}
更多精彩内容：各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等，尽在 天边资源网 。