前端技术分享：Css定位

快来打我* 2022-11-29 11:54 223阅读 0赞

在css众多属性中，定位position属性，必须有姓名，而且占据了比较重要的地位，比如：二级，三级导航效果，鼠标悬停的一些动态效果，悬停栏，侧边导航栏定位效果等等都是需要定位实现的。

但是很多小伙伴，刚接触定位的时候，理解上会有一些困惑，使用上容易出bug，那我们今天就来聊一下定位position属性；

## 1、定位的历史 ##

[W3C][]（万维网联盟）组织于1998年5月发布了CSS2版本，CSS2规范在很大程度上扩展了CSS1中的内容。它包括数十种新的属性（和伪元素），以及现有属性的很多附加值，其中就包括 **定位属性**。

## 2、浏览器的支持 ##

所有主流浏览器都支持 position 属性。

## 3、position属性的语法 ##

**position 属性：**规定元素的定位类型

**属性值：**

static：默认值。没有定位，元素出现在正常的流中。

relative：生成相对定位的元素，相对于其正常位置进行定位。

fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。

absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

sticky （css3中新增的属性值）: 粘性定位，该定位基于用户滚动的位置。

## 4、**定位需要配合使用的属性** ##

left 属性:规定元素的左边缘偏移的大小。

right 属性规定元素的右边缘偏移的大小。

top 属性规定元素的顶部边缘偏移的大小。

bottom 属性规定元素的底部边缘偏移的大小。

以上属性用于给元素定位设置坐标点的位置；

**属性值：**

auto： 默认值。通过浏览器计算左边缘的位置。

%： 设置以包含元素的百分比计的左边位置。可使用负值。

length： 使用 px、cm 等单位设置元素的左边位置。可使用负值。

## 5、**了解编程中的坐标** ##

*  编程中的坐标，x轴-水平轴右为正，左为负，Y轴-垂直轴下为正，上为负

![format_png][]

*  每个元素都自带一个坐标系，元素左上角的位置为原点（0）位置，如下图所示

![format_png 1][]

## 6、 **分别介绍定位属性每个属性值的使用语法** ##

*  **position:static 静态定位**

position属性的默认值，即没有定位，遵循正常的文档流对象。

遵循正常的文档流对象，可以理解为，元素的位置根据在html中的书写顺序依次排序显示，没有特殊的位置改变

*  **position:relative 相对定位**

生成相对定位的元素，相对于其正常位置进行定位。

**基本使用讲解：**

例如：一个img元素在没有设置定位时，正常显示在浏览器中，自带坐标系，

如图显示；

![format_png 2][]

给img元素设置相对定位，设置定位的坐标为（100px,100px），美女的位置会从原本原点的位置移动到（100px,100px）的位置，会发生如下变化：

![format_png 3][]

代码实现如下：

html： <img src="timg.jpg" alt="" />
 css ： img {
 // img元素进行相对定位
 position: relative;
 // 定位的坐标（相对于自身位置左边100px，相对于自身位置上面100px的位置定位）
 left: 100px;
 top: 100px;
 }

## **相对定位对元素在文档流中的影响** ##

元素仍然保持其未定位前的形状，它原本在文本流中所占的空间仍保留

**例如：在img标签下面书写一个span标签，**img在定位之后，原本的位置空间依旧是保留在文本流中的，写在img下面的span是没有上去的；

**代码实现如下：**

<img src="timg.jpg" alt="" />
 ~~~~~~~我是写在img下面的文本亚~~~~~~~~
 css ： img {
 // img元素进行相对定位
 position: relative;
 // 定位的坐标（相对于自身位置左边100px，相对于自身位置上面100px的位置定位）
 left: 100px;
 top: 100px;
 }
 span {
 background: lemonchiffon
 }

**效果如下：**

![format_png 4][]

*  position: absolute 绝对定位

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

**解释：**指绝对定位元素会根据有定位设置（除static定位）的父元素作为参照进行定位；如果父元素没有定位设置，那就继续向上找祖父元素，看是否有定位设置，有的话就根据祖父元素定位，没有的话，那就继续向上找…….如果都没有，就根据html进行定位。

**包含块：**绝对定位元素参照的有定位设置的父元素我们称为包含块，包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物；

设置某个元素为包含块：给此元素添加relative，fixed，absolute都可，推荐使用relative，因为不会影响元素在文本流中的显示；

**总结元素绝对定位三部曲：**

*  先确定其包含块
 *  设置元素绝对定位
 *  定位的位置

## **基本使用讲解：** ##

**例如：**img元素放在div中，没有设置定位效果

**代码实现如下：**

**HTML:**

<!DOCTYPE html>
 <html lang="en">
 <head> </head>
 <body>
 <div>
 <img src="../img/timg.jpg" alt="" />
 </div>
 </body>
 </html>

**CSS：**

div {
       width: 400px;
       height: 400px;
       border: 10px dashed coral;
       margin: 100px;
    }

**显示效果如下：**

![format_png 5][]

然后给图片设置绝对定位，代码如下：

img {
        position: absolute;
        left: 0;
        top: 0;
    }

**分析：**img的父元素是div，从上述代码中，可以看出div没有定位设置，不能作为img的包含块，一依次向上是body，body也没有定位设置，再向上就是html，所以img会根据html进行定位，定位到离包含块左边0，上边0的位置定位，也就是左上角位置；

**效果如下：**

![format_png 6][]

如果想让img根据div盒子进行定位，div需要有除static之外的定位设置；成为一个包含块，代码如下：

div {
        width: 400px;
        height: 400px;
        border: 10px dashed coral;
        margin: 100px;
        /* position:absolute relative fixed都可以让一个元素成为包含块 */
        position: absolute;
     }
     img {
        position: absolute;
        left: 100px;
        top: 100px;
     }

效果如下：

![format_png 7][]

## 绝对定位对元素在文档流中的影响 ##

给元素设置绝对定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样；

**例如：**在img下面添加了一个p标签，并且没有给img设置绝对定位，此时img和p会根据书写顺序，从上向下依次显示，代码如下：

Html：

<div>
 <img src="../img/timg.jpg" alt="" />
 
 ~~~~~~我是写在img下面的span呀~~~~~~
 
 </div>

Css：

* {
        margin: 0;
        padding: 0;
     }
    div {
        width: 400px;
        height: 400px;
        border: 10px dashed coral;
        margin: 100px;
     }
    p {
        background: lemonchiffon;
     }

**效果如下：**

![format_png 8][]

当给img设置绝对定位之后，img在正常文档流中所占的空间会关闭，img不在占据原来的空间；p标签就会当img不存在一样，显示在div最开始的位置：

**代码如下：**

Html：

<div>
 <img src="../img/timg.jpg" alt="" />
 
 ~~~~~~我是写在img下面的span呀~~~~~~
 
 </div>

Css：

* {
        margin: 0;
        padding: 0;
     }
     div {
        width: 400px;
        height: 400px;
        border: 10px dashed coral;
        margin: 100px;
        /* position:absolute relative fixed都可以让一个元素成为包含块 */
        position: relative;
     }
     img {
        position: absolute;
        left: 100px;
        top: 100px;
     }
     p {
        background: lemonchiffon;
     }

**效果如下：**

![format_png 9][]

*  固定定位 position:fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

## **基本使用讲解** ##

元素设置固定定位之后，相对窗口进行定位，不会根据浏览器滚动条的滚动而移动位置，代码如下：

**结构：**内容比较多,让浏览器可以出现滚动条

效果如下：

![format_png 10][]

给图片添加固定定位；代码如下：

效果如下：

![format_png 11][]

![format_png 12][]

## **固定定位对元素在文档流中的影响** ##

给元素设置固定定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样（参照上图看效果）；

**sticky 粘性定位**

css3中新增的属性值，有兼容问题，ie低版本浏览器不支持

粘性定位，元素在浏览器范围内定位时就像 **position:relative;** 而当页面滚动超出目标区域时，它的定位效果就像 **position:fixed;**，它会固定在目标位置。

## 基本语法讲解 ##

例如：给img元素设置粘性定位，代码如下：

Html结构：

<body>
 	我是让当前浏览器产生滚动条的文本1
 	 
 	我是让当前浏览器产生滚动条的文本2
 	 
 	我是让当前浏览器产生滚动条的文本3
 	 
 	<img src="../img/timg.jpg" alt="" />
 	 
 	我是让当前浏览器产生滚动条的文本4
 	 
 	我是让当前浏览器产生滚动条的文本5
 	 
 	我是让当前浏览器产生滚动条的文本6
 	 
 	我是让当前浏览器产生滚动条的文本7
 	 
 	我是让当前浏览器产生滚动条的文本8
 	 
 	我是让当前浏览器产生滚动条的文本9
 	 
 	我是让当前浏览器产生滚动条的文本10
 	 
 	我是让当前浏览器产生滚动条的文本11
 	 
 </body>

css代码：

效果如下：

![format_png 13][]

![format_png 14][]

![format_png 15][]

## **元素设置绝对定位、固定定位后，会生成一个块级框，而不论原来它在正常流中生成何种类型的框。** ##

**例如： span默认为行内元素，给其设置绝对定位，观察其生成的块级框效果，代码如下：**

Html：

我是测试绝对定位对元素类型影响的小可爱

Css：

效果如下：

![format_png 16][]

以上是对position属性语法的基本讲解，其实position在实际开发中，有很多灵活的使用方式，下次我们写一个比较有趣的案例，给大家展示定位在实际项目中的灵活应用。

[W3C]: https://link.zhihu.com/?target=https%3A//baike.baidu.com/item/W3C
[format_png]: /images/20221124/dec848dba11543d487f946a5d5f234e8.png
[format_png 1]: /images/20221124/ac3bc676c52e4285ada552194fe87e73.png
[format_png 2]: /images/20221124/74a959db613243838c98df512a1b1c38.png
[format_png 3]: /images/20221124/84e2ca56d0854e51912adc5eda78cc70.png
[format_png 4]: /images/20221124/502b70b0dee1459881b076c4bedf29c3.png
[format_png 5]: /images/20221124/424f4715467d48c49f3db05241751aa0.png
[format_png 6]: /images/20221124/eea355a5f30e4cc2bebe09d912727ea4.png
[format_png 7]: /images/20221124/e132f410e49d49a8a21dd56832efc13b.png
[format_png 8]: /images/20221124/390543927865472fb1bf4f66584b56bf.png
[format_png 9]: /images/20221124/2a14c644cf78498997dec1d41b9de88f.png
[format_png 10]: /images/20221124/399f555a16a546d691d32c8031c9d979.png
[format_png 11]: /images/20221124/89d4dd7171df4b8cbc9da86d32927292.png
[format_png 12]: /images/20221124/5fdc3b4eb6c0409a95080c3a8aa51291.png
[format_png 13]: /images/20221124/d606fcfc69964625a03f41d56391cc3a.png
[format_png 14]: /images/20221124/b683948e3bac4f28acee2d6f26b46408.png
[format_png 15]: /images/20221124/92ef9472f1b2463ca80b2c539abc6216.png
[format_png 16]: /images/20221124/42fead1db7b14f7ca882a42313bbc112.png