如何使元素相对于其父，而不是整个屏幕的固定位置？ [英] How to make an element with fixed position relative to its parent, not the whole screen?

问题描述

我遇到的情况，当用户向下滚动时，边栏的一部分获取固定的位置，但是当我捕获的位置，并应用固定CSS到侧边栏元素，它被固定到整个屏幕，而不只是父

解决方案

首先了解排名：

固定位置或[position：fixed] p>

具有固定位置的元素相对于浏览器窗口定位。

/ em> OR [position：relative]

相对定位元素相对于其正常位置定位。

绝对定位或[position：absolute]

绝对位置元素相对于

所以在你的情况下你的父 div 应该有 position：relative ，而你的孩子 div 绝对而不是 position：fixed

参考链接

I run into situation that when user scroll down, a part of the sidebar gets fixed position, however when I catch the position and apply fixed css to the sidebar element, it gets fixed to whole screen, not just the parent (which is sidebar)

how do I setup this correctly?

解决方案

First Understand Positioning:

Fixed Positioning OR [ position:fixed ]

An element with fixed position is positioned relative to the browser window.

Relative Positioning OR [ position:relative ]

A relative positioned element is positioned relative to its normal position.

Absolute Positioning OR [ position:absolute ]

An absolute position element is positioned relative to the first parent element that has a position other than static.

So in your case your parent div should have position:relative and your child div should have position:absolute instead of position:fixed

Reference Link

这篇关于如何使元素相对于其父，而不是整个屏幕的固定位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！