CSS中的定位(position)详解

将学过的定位进行一个简单的整理，方便以后查阅，也想向大家分享一下。

众所周知，定位分为5种，分别为：静态定位、相对定位、绝对定位、固定定位、粘性定位。下面我为大家详细介绍一下每种定位。

1.静态定位(static)：

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。

静态定位按照标准流特性摆放位置，它没有边偏移。

静态定位在布局时我们几乎不用的

图片解释：

2.相对定位(relative)：

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的。

相对定位的特点：

1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的

图片解释：

3.绝对定位(absolute)：

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

绝对定位的特点总结：

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置

3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的（脱标）

4.固定定位(fixed)：

固定定位是元素固定于浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

固定定位的特点：
1.以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动

2.固定定位不在占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。完全脱标—— 完全不占位置，只认浏览器的可视窗口—— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置；跟父元素没有任何关系；单独使用的，不随滚动条滚动。

图片解释：

5.粘性定位(Sticky )：

粘性定位可以被认为是相对定位和固定定位的混合
粘性定位的特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom 其中一个才有效。跟页面滚动搭配使用。兼容性较差，IE 不支持

CSS中的定位(position)详解相关推荐

CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
css 定位position详解,background注意事项哒哒哒 -----20181119
1.定位position:relative || absolute || fixed生成绝对定位的元素,相对于浏览器窗口进行定位.|| inherit (1)属性解释 ①````position ...
CSS中的定位——position属性
CSS定位指的是改变元素在页面中的位置. CSS定位机制: 普通流:元素按照其在HTML中的位置顺序决定排布的过程(也就是我不对元素进行定位的默认排布) 浮动绝对布局 CSS定位包含的属性有: 属 ...
前端如何设置背景颜色的透明度 css中的 rgba() 函数详解：background-color: rgba(255,192,203,0.3)
目录前言 rgba() 函数详解再分享一个小技巧哈哈哈前言今天在开发移动端的时候感觉没背景颜色有点丑,再加上自己做的是蛋糕app,觉得暖色应该会很好看,于是就用了这行代码 backgroun ...
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
html页边距为负值,css中的padding属性可以为负值吗？css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧首先我们介绍的是第一个问题 ...
html中的em等于多少像素,CSS中的em运用详解，1em等于多少像素？
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...
css中伪类选择器详解(a:visited不生效的原因)
css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...
css中的百分比单位详解
CSS支持多种单位形式,如百分比.px.pt.rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem.vh.vw也开始普遍使用,这些单位你可能未必知道,想了解?可以戳此文: CSS:7个 ...

CSS中的定位(position)详解

CSS中的定位(position)详解相关推荐

最新文章

热门文章