position:fixed实现相对于父级定位

position:fixed是对于浏览器窗口定位的，要实现相当于父元素定位，可以这样：

不设置fixed元素的top，bottom，left，right，只设置margin来实现。

这种方法本质上fixed元素还是相当于窗口定位的，实现效果上是相对于父元素定位。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>.wrapper{position: relative;height: 1000px;width: 600px;margin: 20px auto;background: pink;}.box1,.box2{height: 100px;width: 100%;background: #f39bdc;}.box2{background: #8abe8a;}.click{position: fixed;margin-left: 599px;width: 60px;height: 20px;text-align: center;border: 1px solid blueviolet;}
</style>
<body><div class="wrapper"><div class="box1">box1</div><div class="box2">box2</div><div class="click">点击</div></div>
</body>
</html>

补充点：z-index

z-index属性只适用于定位元素。所以，即使为元素提供z-index的值将其置于其他元素之前，z-index也不会对元素产生影响，除非它被定位；也就是说，除非它具有除static之外的position值

更多点击：https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property–webdesign-16892?utm_source=so&utm_source=so

position:fixed实现相对于父级定位相关推荐

position:fixed 实现相对于父元素定位
position:fixed 实现相对于父元素定位比如:中间内容区域的大小固定为1000px,对应不同的浏览器宽度,要使得某一个资源子固定在相对于内容区域的某一个位置,就不能使用 left:xxx, ...
子元素设置position:fixed，z-index大于父元素依然被父元素盖住
在项目中遇到一个奇怪的问题,当父元素样式overflow有滚动条.borde-radius存在.position不为static时,和z-index不为auto时,子元素的position就算是fix ...
position: fixed如何相对父元素定位
在项目中遇到一个问题,项目中有一个弹框,弹框中有一个anchor组件,弹框中的内容可以滚动,而anchor组件需要相对于弹框保持固定.我们知道,position: fixed是相对于浏览器窗口进行定位 ...
CSS position: fixed 相对于父元素定位
使用 fixed 进行布局的元素,在一般情况下会相对于屏幕视窗来进行定位.但是如果父元素的 transform, perspective 或 filter 属性不为 none 时,position为f ...
深入理解定位父级offsetParent及偏移大小
偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个 ...
javascript好文---深入理解定位父级offsetParent及偏移大小
前面的话偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...
不要乱用position:fixed
经常会有一个需求,在一个固定窗口内容滚动,底下有操作按钮需要固定,不随着滚动,一般第一个念头就是用固定定位position: fixed,但是fixed是以窗口为父元素去定位的,这么做肯定是错的,需要 ...
解决微信小程序使用css滤镜filter后position fixed错乱
最近给wechat小程序设置灰色页面,给page标签使用灰色滤镜后导致position fixed位置错乱,无法正确定位,样式错乱解决方案: 不对page view标签设置滤镜filter,只对 t ...
html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

position:fixed实现相对于父级定位

补充点：z-index

position:fixed实现相对于父级定位相关推荐

最新文章

热门文章