前言

本文主要介绍了CSS中常用的四种定位方法

一、什么是定位？

定位是一种更加高级的布局手段，就是将指定的元素摆放到页面的任意位置，使用position属性来设置定位；

可选值——

static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位

二、常用的四种定位方法

1.相对定位

相对定位（relative）：当元素的position属性设置为 relative 则开启了元素的相对定位。

如图，想要粉色盒子左偏移100px但不脱离文档流，则开启相对定位就可解决，

代码如下（示例）：

<style type="text/css">.box {width: 300px;height: 300px;border: 5px solid rgb(56, 56, 56);}.box1 {width: 100px;height: 100px;background-color: #bfa;/* float: left; */}.box2 {width: 100px;height: 100px;background-color: pink;position: relative;left: 100px;}.box3 {width: 100px;height: 100px;background-color: orange;}</style></head><body><div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div></body>

相对定位的特点：

1.元素开启相对定位后，如果不设置偏移量元素不会发生任何的变化

偏移量：当元素开启了定位后，可以通过偏移量来设置元素的位置

top（定位元素和定位位置上边的距离,元素会向下移） bottom left right 定位元素垂直方向的位置有top,bottom 两个属性来控制

2.相对定位是参照于元素在文档流中的位置进行定位的(起初的自身的位置)

3.相对定位会提升元素的层级

4.不会使元素脱离文档流

5.相对定位不会改变元素的的性质（块还是块，行内还是行内）

2.绝对定位

绝对定位（absolute） :当元素的position属性设置为 absolute 则开启了元素的绝对定位.

如图，可以看到粉色盒子因开启了绝对定位而脱离了文档流导致橘色盒子上移。

 <style type="text/css">.box {width: 300px;height: 300px;border: 5px solid rgb(56, 56, 56);/* 开启相对定位 */}.box1 {width: 100px;height: 100px;background-color: #bfa;/* float: left; */}.box2 {width: 100px;height: 100px;background-color: pink;/* 开启绝对定位 */position:absolute;left: 100px;}
</style>

绝对定位的特点：

1、开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

2、开启绝对定位后，元素会从文档流中脱离

3、绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

4、绝对定位会使元素提升一个层级

5、绝对定位元素是相对于其包含块进行定位的。绝对定位的包含块：就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块。html(根元素，也叫做初始包含块 )

3.固定定位

固定定位(fixed)将元素的position属性设置为fixed,则开启了元素的固定定位。

固定定位也是一种绝对定位，所以固定定位的大部分额特点都和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位，固定定位的元素不会随网页的滚动条滚动。

4.粘滞定位

粘滞定位(sticky)将元素的position属性设置为sticky,则开启了元素的粘滞定位。

粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

不会脱离文档流，不会脱离文档流

sticky一般与top使用，比如给某个模块设置粘滞定位，当到达一定高度，top为一定值时就粘滞不动。

总结

以上就是今天要讲的内容，就此停笔，拜~

CSS——绝对定位与相对定位相关推荐

css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
css绝对定位与相对定位结合使用
css绝对定位与相对定位结合使用 1.绝对定位与相对定位绝对定位使元素的位置与文档流无关,因此不占据空间.这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普 ...
css 绝对定位和相对定位
绝对定位绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占据空间. 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素.如果当前需要被定位的元素没 ...
css绝对定位和相对定位实例。
先写一段简单代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
CSS 绝对定位与相对定位
前几天遇到了上班的第一个难题,项目想要实现这样的效果: 一开始我天真地以为只要设置边框加上圆圈的图片就可以了,然而按这种方法实际上实现的效果是这样的: 实际效果比视觉图上下多了两截... 但是,聪明如 ...
CSS绝对定位和相对定位
绝对定位和相对定位(可以直接看总结) 1. 概念 2. 例子 3. 总结 4. 常用前言: 一直觉得位置放的对就行了,放不对的top bottom和left right乱调,调对了却不知道为什么 ...
CSS绝对定位和相对定位的百分比计算以及宽高计算
参考文章:relative 和 absolute 元素的百分比定位.CSS进阶--绝对定位元素的宽高是如何定义的一.设置top.right.bottom.left的值为百分比如果没有设置top.r ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...

CSS——绝对定位与相对定位

文章目录

前言