首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

位置 | Position

使用这些速记工具快速配置元素的位置。

共同的价值

快速定位类可用,但它们没有响应。

代码语言:javascript
复制
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

固定顶部

从边到边放置一个元素在视口的顶部。确保你了解项目中固定职位的影响;您可能需要添加aditional CSS。

代码语言:javascript
复制
<div class="fixed-top">...</div>

固定底部

将元素放置在视口的底部,从边到边。确保你了解项目中固定职位的影响;您可能需要添加aditional CSS。

代码语言:javascript
复制
<div class="fixed-bottom">...</div>

粘顶

将元素放置在视口的顶部,从边到边,但只能在滚过它之后进行。.sticky-top实用程序使用CSS position: sticky,这在所有浏览器中都不完全支持。

Microsoft Edge和IE11将呈现position: sticky为**position: relative。**因此,我们将这些样式封装在@supports查询中,将粘滞性限制为只能正确呈现它的浏览器。

代码语言:javascript
复制
<div class="sticky-top">...</div>

扫码关注便宜云服务器开发者

领取便宜云服务器代金券

http://www.vxiaotou.com