position四个属性详解

1. `position:static;`

这个属性让元素使用正常的布局(元素在文档常规流中当前的布局位置)。

也就是说元素没加这个属性和加了以后位置都是不变的
只是此时 top, right, bottom, left 和 z-index属性无效。

2. `position:relative;`：相对定位

在元素原有的位置基础上，根据设置的top,left调整元素位置
不会改变页面布局，不影响其他元素的偏移，因此会在此元素未添加定位时所在位置留下空白
position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box {display: inline-block;width: 100px;height: 100px;background: red;color: white;
}#two {position: relative;top: 20px;left: 20px;background: blue;
}

3. `position:absolute`：绝对定位

假设给A元素添加绝对定位，那么A元素就会相对于最近的非static定位祖先元素偏移，来确定A元素位置。
当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）
A元素会被移出正常文档流，并不为元素预留空间。不会像relative那样，在元素未添加定位时所在位置留下空白。
绝对定位的元素可以设置外边距（margins），且不会与其他边距合并

<style>.box {display: inline-block;width: 100px;height: 100px;background: red;color: white;}#two {position: absolute;top: 20px;left: 20px;background: blue;}
</style><body><div class="box" id="one">One</div><div class="box" id="two">Two</div><div class="box" id="three">Three</div><div class="box" id="four">Four</div>
</body>

按照下面代码这样，two这个盒子是相对于body定位的。如果给上面四个盒子外添加一个父盒子，并且给这个父盒子添加除了static以为的定位，那么他就会相对于父盒子偏移。

3. `position:fixed;`：固定定位

添加这个属性的元素会相对于屏幕视口(viewport)来定位
在滚动屏幕位置的时候元素位置不会改变。在固定顶部导航栏的时候可以使用这个属性。
fixed 属性会创建新的层叠上下文
当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

.box {position: fixed;}

4. `position: sticky;`：粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

#one { position: sticky; top: 10px; }

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

position四个属性详解相关推荐

position和float属性详解
当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法. 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版.或者,如果需要 ...
HTML中元素的position属性详解
HTML中元素的position属性详解转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...
CSS margin属性详解
CSS margin属性详解我发现当我想写好一篇博文的时候,希望以后能有人看到,会对别人也有一定的帮助,这时候对于其中的内容就变得深思熟虑起来,让自己查阅尽可能多的资料,这样的方式正好可以弥补我某些 ...
overflow属性详解
overflow属性详解_桃花扇J的博客-CSDN博客_overflow属性原链接 overflow是对溢出内容的处理,有四个属性值visible,hidden,scroll,auto,且可以分别设 ...
css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
【NLP】四万字全面详解 | 深度学习中的注意力机制（四，完结篇）
作者 | 蘑菇先生知乎 | 蘑菇先生学习记深度学习Attention小综述系列: 四万字全面详解 | 深度学习中的注意力机制(一) 四万字全面详解 | 深度学习中的注意力机制(二) 四万字全面详解 ...
【NLP】四万字全面详解 | 深度学习中的注意力机制（三）
NewBeeNLP原创出品公众号专栏作者@蘑菇先生知乎 | 蘑菇先生学习记深度学习Attenion小综述系列: 四万字全面详解 | 深度学习中的注意力机制(一) 四万字全面详解 | 深度学习中的 ...
Flash播放控件属性详解
Flash 播放控件属性详解一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
nemesis什么车_狂野飙车9TrionNemesis介绍 S级车Trion复仇女神属性详解
狂野飙车9S级车Trion Nemesis介绍,狂野飙车9S级车Trion复仇女神属性详解,下面雨落就为大家带来狂野飙车9S级车Trion复仇女神的改装升级所需卡牌已经金币等攻略. [赛车属性]: S ...

position四个属性详解

1. `position:static;`

2. `position:relative;`：相对定位

3. `position:absolute`：绝对定位

3. `position:fixed;`：固定定位

4. `position: sticky;`：粘性定位

position四个属性详解相关推荐

最新文章

热门文章

position四个属性详解

1. position:static;

2. position:relative;：相对定位

3. position:absolute：绝对定位

3. position:fixed;：固定定位

4. position: sticky;：粘性定位

position四个属性详解相关推荐

最新文章

热门文章

1. `position:static;`

2. `position:relative;`：相对定位

3. `position:absolute`：绝对定位

3. `position:fixed;`：固定定位

4. `position: sticky;`：粘性定位