CSS中,通过使用“position:fixed”属性可以将一个元素固定在页面的某个位置上,不随滚动条滚动而改变位置。但是,有时需要将一个元素的位置固定在其父级元素内,而不是整个页面,这时候可以使用“position:relative”和“position:absolute”属性来实现。
首先,需要将父级元素设置为“position:relative”,以使子元素能够参照其位置进行定位。然后,在子元素中使用“position:absolute”来设置其位置,并通过“top”、“bottom”、“left”和“right”属性来指定距离父级元素的边缘的距离。
.parent { position: relative; height: 500px; width: 500px; background-color: #f5f5f5; } .child { position: absolute; top: 50px; left: 50px; height: 100px; width: 100px; background-color: #2196F3; }
在上述代码中,父级元素的高度和宽度分别设置为500px,背景色为灰色。子元素的高度和宽度均为100px,背景色为蓝色,距离父级元素边缘的距离分别为50px。
这样一来,子元素就会固定在父级元素内的指定位置上,并不会随滚动条的滚动而改变位置。