定位

定位（position）是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置
可选值：
static：默认值，元素静止，没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
sticky：开启元素的粘滞定位

偏移量（offset）

元素开启定位后，可以通过偏移量来设置元素的位置，偏移量有四个分别是
top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
left：定位元素和定位位置左边的距离
right：定位元素和定位位置右边的距离
偏移量跟margin的区别其实就是：
使用偏移的话，只移动当前元素，且不会对其他元素进行挤压（会盖住其他元素）
使用margin的话，元素向某个方向移动会将对应方向上的元素进行挤压（会推开其他元素）
听不懂没关系，后边会有例子。

相对定位

当position的属性值为relative时，开启相对定位。

开启相对定位特点：
①不设置偏移量，元素无变化
②参照元素在文档流中的位置进行定位
③相对定位会提升元素的层级（当和其他元素重叠时，会盖住其他元素）
④相对定位不会脱离文档流
⑤不会改变元素的性质（块元素还是块元素，行内元素还是行内元素）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>body{font-size: 30px;}.box1,.box2,.box3{width: 100px;height: 100px;}.box1{background-color: #bbffaa;}.box2{background-color: orange;/*position: relative;*//*bottom: 100px;*//*left: 100px;*/}.box3{background-color: grey;}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</body>
</html>

显示：

现在使用定位对其进行上图所示修改：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>body{font-size: 30px;}.box1,.box2,.box3{width: 100px;height: 100px;}.box1{background-color: #bbffaa;}.box2{background-color: orange;/*开启相对定位*/position: relative;/*向下偏移100px，向左偏移100px，*/bottom: 100px;left: 100px;}.box3{background-color: grey;}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</body>
</html>

绝对定位

当position的属性值为absolute时，开启相对定位。
开启绝对定位的特点：
①不设置偏移量，元素的位置不会发生变化
②元素会从文档流中脱离
③绝对定位会改变元素的性质（行内变成块，块的宽高被内容撑开）
④绝对定位会使元素提升一个层级
⑤绝对定位元素相对于其包含块进行定位(包含块的定义在下边）
⑥
**
包含块（containing block）的概念：
正常情况下，包含块就是离当前元素最近的祖先块元素。
开启绝对定位的情况下，包含块就是离他最近的开启了定位的祖先元素。（只要position的属性值不为static都属于开启定位）如果所有的祖先都米有开启定位，那么包含块就是html元素（根元素）。

比如：
现在有以下结构（正常情况）

<div><div></div>   <!--我的包含块元素是上面的div-->
</div>

但是，如果是这种情况：

<div><span><!--我的包含块元素是上面的div--><em>hello</em><!--我的包含块元素是上面的div,因为span不是块元素--></span>
</div>

开启绝对定位下的情况：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><link rel="stylesheet" href="../css/reset.css"><style>body{font-size: 30px;}.box1,.box2,.box3{width: 100px;height: 100px;}.box1{background-color: #bbffaa;}.box2{background-color: orange;position: absolute;left: 0px;top: 0px;}.box3{background-color: grey;}.box4{width: 300px;height: 300px;background-color: yellowgreen;}.box5{width: 200px;height: 200px;background-color: tomato;}</style>
</head>
<body><div class="box1">1</div><div class="box4">4<div class="box5">5<div class="box2">2</div></div></div><div class="box3">3</div>
</body>
</html>

当box4和box5都没有开启定位，显示：

当box4开启定位：

当box5开启定位：

综上，应该不难看出什么是包含块了吧。
下面，我们回归正题，讲讲绝对定位的例子代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><link rel="stylesheet" href="../css/reset.css"><style>body{font-size: 30px;}.box1,.box2,.box3{width: 100px;height: 100px;}.box1{background-color: #bbffaa;}.box2{background-color: orange;position: absolute;left: 100px;top: 0px;}.box3{background-color: grey;}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</body>
</html>

显示：

这里3为什么会往上挪呢，主要是因为绝对定位会让元素脱离文档流。
注意1：这里如果不设置top为0的话，他的显示是下面这样的：

注意2：如果没有清除浏览器默认样式的话，1和2的位置会有所重叠，如下所示：

固定定位

当position的属性值为fixed时，开启固定定位。
开启固定定位的特点：基本上跟绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位。
下面贴两端代码进行解释：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><link rel="stylesheet" href="../css/reset.css"><style>body{font-size: 30px;}.box1,.box2,.box3{width: 100px;height: 100px;}.box1{background-color: #bbffaa;}.box2{background-color: orange;position: fixed;top:0px;left:0px;}.box3{background-color: grey;}.box4{width: 300px;height: 300px;background-color: yellowgreen;}.box5{width: 200px;height: 200px;background-color: tomato;position: relative;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">4<div class="box5">5<div class="box2">2</div></div>
</div><div class="box3">3</div>
</body>
</html>

显示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><link rel="stylesheet" href="../css/reset.css"><style>body{font-size: 30px;}.box1,.box2,.box3{width: 100px;height: 100px;}.box1{background-color: #bbffaa;}.box2{background-color: orange;position: fixed;top:0px;left:0px;}.box3{background-color: grey;}.box4{width: 300px;height: 300px;background-color: yellowgreen;}.box5{width: 200px;height: 200px;background-color: tomato;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">4<div class="box5">5<div class="box2">2</div></div>
</div><div class="box3">3</div>
</body>
</html>

显示：

显然，无论他的祖先是否有设置定位，设置了固定定位的元素都在同一个地方，即他的包含块都是根元素（html）。这就是固定元素和绝对元素的唯一区别。

粘滞定位

兼容性不是很好（低版本的浏览器等会用不了，例如老牌IE浏览器），故这里不多做介绍。

27.html的定位（position）和偏移量（offset）相关推荐

前端基础入门之css定位 position
定位的简介需求分析按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
定位--position属性
一.定位--position属性 1.static:默认值没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right botto ...
kafka专题：kafka的Topic主题、Partition分区、消费组偏移量offset等基本概念详解
文章目录 1. kafka集群整体架构 2. kafka相关元素的基本概念 2.1 主题Topic和分区Partition 2.2 kafka消息存储在哪里? 2.3 分区副本 2.4 消费组和偏移量 ...
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总结（超详细哦！）
文章目录前言一.定位(position) 介绍 1.为什么使用定位 2.定位组成二. 定位模式 (position) 1.边偏移(方位名词) 2.定位模式介绍 1.1 静态定位(static) ...
元素偏移量offset系列及e.pageX(e.pageY)
1.offset概述注意:目标元素的父元素要有定位,否则偏移量为目标元素与body元素之间的距离 2.offset与style的区别 3.e.pageX和e.pageY 目标元素在浏览器中的位置案 ...
RocketMq 消息偏移量 Offset
消息偏移量 Offset queue0 offset 0 0-20 offset 1 20-40 纠错:每条消息的tag对应的HashCode. queue1 offset 0 0-20 offset ...

27.html的定位（position）和偏移量（offset）

文章目录

定位