CSS中有一种常见的底部靠下定位方式。一般情况下,我们使用position:absolute或position:relative来定位元素,但这两种定位会使元素脱离文档流,会影响其它元素的位置。所以,
CSS中有一种常见的底部靠下定位方式。
一般情况下,我们使用position:absolute或position:relative来定位元素,但这两种定位会使元素脱离文档流,会影响其它元素的位置。
所以,我们可以使用定位边界为父元素的position:fixed实现底部靠下定位。例如:
.parent { position: fixed; bottom: 0; width: 100%; height: 100px; background-color: #333; } .child { position: absolute; bottom: 0; width: 100%; height: 50px; background-color: #fff; }
在上述例子中,父元素设置为position:fixed,高度为100px,即为我们希望子元素的高度。子元素设置为position:absolute,底部也设置为0,这样就可以实现底部靠下定位了。
需要注意的是,父元素的高度需要与子元素期望的高度一致,否则会影响布局效果。
粉丝
0
关注
0
收藏
0