/* 让元素随着滚动条移动 */ .float-box { position: fixed; top: 100px; right: 30px; }
以上代码可以让一个名为float-box的元素在滚动页面时保持在屏幕固定位置且其它元素可以在它周围正常布局。
如果需要让元素在不同屏幕尺寸下都能正常浮动,可以使用响应式布局技术,例如使用百分比代替固定数值,或者使用@media查询。
/* 响应式布局 */ .float-box { position: fixed; top: 5%; right: 5%; } @media(max-width: 768px) { .float-box { top: 10%; right: 10%; } } @media(max-width: 480px) { .float-box { top: 20%; right: 20%; } }
上述代码可以让float-box元素在不同尺寸屏幕下都自动适应自己的位置。
总之,层随屏幕浮动可以让网页更加美观,增强用户体验,但是也要注意不要过度使用,以免给用户带来困扰。