css设置子元素相对于父元素保持位置不变（含有滚动条的父元素）

2024-06-02 06:41| 来源: 网络整理| 查看: 265

方法一：利用子元素设置position:fixed后由于transform导致的相对视口定位失效bug引起的fixed相对于父级定位原文地址：https://www.cnblogs.com/pomelott/p/7425650.html

首先，大家都清楚，元素使用fixed之后，若不设置top与left则会相对于最近的使用定位的父元素，并位于父元素的原点位置设置top与left值时，则会相对于窗口定位。但无论如何，此时仍相对于窗口定位，在此不过多描述。

今天发现的是当某一元素使用transform属性后，其所有使用fixed定位的子元素的fixed属性都会失效。此处可查看W3C文档 https://www.w3.org/TR/css-transforms-1/#issue-ca2c412c

因此可以利用此bug时fixed元素相对于父级定位，而非相对于窗口定位。

在此需要注意，当inter元素设置top与left值时，则会相对于outer之外最近的使用定位的元素，而非相对于outer元素。 *{ padding: 0; margin: 0; } body{ height: 500px; } .wrapper{ width: 400px; height: 400px; background: #c0c0c0; position: relative; top:50px; left: 50px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .parent{ position: relative; width: 400px; height: 400px; background: #ff0; overflow: auto; } .child{ position: fixed; width: 200px; height: 200px; background:#f00; right: 50px; bottom: 50px; } .placeholder { width: 1000px; height: 1000px; } 方法二：利用子元素设置position:absolute后会相对于第一个设置了relative的元素定位来保持位置原文地址：http://www.cnblogs.com/biyesheng/p/6386176.html 原理：子元素要固定设置absolute，父元素不设置position，但是设置overflow可以滚动，父元素的包裹元素设置relative，父元素大小与其包裹元素一致，这样子元素相对于父元素的包裹元素固定（absolute相对于第一个设置了relative的元素定位），不管子元素的兄弟元素如何变化，该子元素位置不变。问题描述

之前在项目中，遇到了一个场景，需要实现相对于父元素的fixed定位：在父元素内拖动滚动条时，"fixed"定位的元素不能滑动，在外层拖动滚动条时，父元素及父元素内的所有元素跟着一起滑动。但是position: fixed是相对于窗口进行的定位，不能直接实现我们需要的效果。在网上搜索看到一个还不错的解决方案，不过利用了CSS3的transform，兼容性不是很好。

解决思路

?这是我们希望的效果，但是没法直接实现

我们想让特定子元素相对于父元素"fixed"定位，也就是说，剩余的子元素不定位。那我们可以分开来想，如果添加一个祖先元素assistor，有两个祖先元素，一个用于辅助定位，一个用于包裹不定位的内容，这个问题不就解决了吗。像这样?

实质上是child相对于assistorabsolute定位，parent内的内容自己负责展示。只要assistor和parent一样大，看起来就像是子元素child相对于父元素parent固定定位了。具体原理是position: absolute;的元素会相对于第一个设置了position: relative;的祖先元素进行定位，我们将assistor设置为position: reletive;，滚动条是在parent中的，这样"fixed"定位和parent内的内容滚动就都实现了。

最终代码

HTML:

CSS:

.assistor { position: relative; /*关键点*/ display: block; width: 500px; height: 300px; margin: 100px auto 0 auto; background-color: #ddd; } .parent { width: 500px; height: 300px; background-color: #888; overflow: auto; /*关键点*/ } .child { position: absolute; /*关键点*/ width: 120px; height: 120px; margin: 100px 50px; background-color: #333; } .placeholder { width: 1000px; height: 1000px; }

【本文地址】

公司简介

联系我们