position：fixed 父元素限制位置

父元素使用 `position: relative;` 可以限制 `position: fixed;` 的子元素的位置。通过给父元素设置相对定位，可以创建一个包含块，而 `position: fixed;` 的子元素将相对于该包含块定位。这意味着子元素的定位将受到父元素的限制，无论页面如何滚动，子元素都会保持在父元素的指定位置上。

相关问题

img { max-width: 100%; max-height: 100%; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; } .overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; border: 5px solid white; box-shadow: 0 0 10px black; }

这段代码是用来实现图片放大效果的。其中，img标签的max-width和max-height属性设置为100%表示图片最大宽度和高度为其父元素的宽度和高度，即图片会自适应大小。overlay类的样式设置了一个黑色半透明的背景层，并将其设置为fixed定位，覆盖在页面上。当需要放大图片时，可以通过JavaScript动态添加overlay元素，将要放大的图片以绝对定位的方式居中显示在overlay元素中，并设置max-width和max-height属性限制图片的最大大小，并添加了一些边框和阴影效果。

css position 导致overflow-y失效了

当一个元素被设置为 position: absolute 或 position: fixed，它会从文档流中脱离出来，当它的父元素有 overflow 属性时，可能会导致 overflow 属性无法生效。这是因为当一个元素脱离文档流时，它的父元素的高度不再包含该元素的高度，所以 overflow 属性无法限制该元素的高度。

解决这个问题的方法有两种：

1. 为父元素添加 position: relative 属性。

2. 为父元素添加一个固定高度，并设置 overflow-y: scroll 属性，这样无论子元素的高度如何，父元素都会保持一定的高度，并且可以通过滚动条来查看子元素的内容。