1、常用的类（class）

Bootstrap 提供了一组用于为元素快速定位的类，但是不支持响应式布局。

<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>

2、固定在顶部

将一个元素固定在视口（viewport）的顶部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。

<div class="fixed-top">...</div>

3、固定在底部

将一个元素固定在视口（viewport）的底部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。

<div class="fixed-bottom">...</div>

4、黏着在顶部

当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。.sticky-top 工具类利用的是 CSS 的 position: sticky 属性，并非所有浏览器都支持该属性。

IE11 和 IE10 会将 position: sticky 渲染为 position: relative。因此，我们将该样式包裹在 @supports 查询内，从而只在支持该属性的浏览器中应用此样式。

<div class="sticky-top">...</div>

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

Bootstrap系列之定位（Position）相关推荐

ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
定位--position属性
一.定位--position属性 1.static:默认值没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right botto ...
CSS基础——定位 (position)【学习笔记】
定位(position) 1. CSS 布局的三种机制网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 普通流 ...
网页定位(position属性、相对定位、绝对定位、固定定位、z-index、设置透明度)
position属性 static:默认值,没有定位 relative:相对定位,相对于自己原来的位置进行偏移 absolute:绝对定位,以它最近一个已经定位的祖先元素为基准进行偏移 fixed:固 ...
CSS——CSS定位※ ( position )
文章目录定位(position) 为什么要用定位? 元素的定位属性静态定位(static) 相对定位relative(自恋型) 绝对定位absolute (拼爹型) 1.父级没有定位 2.父级有定 ...
前端基础入门之css定位 position
定位的简介需求分析按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
自学前端第十八天:CSS精准定位position
超级重点:CSS精准定位(position) 一. ①CSS定位基本概念:如果说, float浮动关键在一个 "浮起来" 字上面, 那么我们的position定位关键在于一个 & ...
CSS定位position总结（超详细哦！）
文章目录前言一.定位(position) 介绍 1.为什么使用定位 2.定位组成二. 定位模式 (position) 1.边偏移(方位名词) 2.定位模式介绍 1.1 静态定位(static) ...
web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录什么是定位? 定位组成(定位模式+边偏移) 定位模式static relative absolute fixed 边偏移定位模式--静态定位static(平时用不到)就是标准流定位模式- ...

Bootstrap系列之定位（Position）

文章の目录