CSS的定位详解

1. 我们为什么要学习定位

在网页上,我们会发现有些图标是定在某一个地方,这是如何实现的呢?这里就用到了定位

2. 元素的定位属性

  1. 元素的定位主要包括定位模式边偏移2个部分

3. 静态定位 static

  1. 对边偏移无效。
  2. 一般用来清除定位的
  3. 一个有定位的盒子不想再有定位了,加上
position:static

就行了。

4. 相对定位relative(自恋型)

  1. 相对定位可以通过边偏移来移动位置,但是原来的位置继续占有。
  2. 每次移动的时候,都是以自己的左上角为起点的,(相对于自己原来的位置)原来的位置继续占有。
  3. 相对定位的盒子仍在标准流中,它后面的盒子不乱。
  4. 如果说浮动是让多个块级元素一行显示,那么定位的价值是让我们的盒子移动到我们想要的位置上去。

不加定位的效果图
在这里插入图片描述
加了相对定位的效果图
在这里插入图片描述
原来的位置继续占有。


5. 绝对定位(拼爹型)

这里有 两个盒子
在这里插入图片描述
当给上面的第一个盒子加绝对定位的时候
在这里插入图片描述

  1. 可以通过边偏移移动位置,但他完全脱标,不占位置。

父亲里有个儿子
在这里插入图片描述

当子向左偏移的时候
在这里插入图片描述

会跑出去。
父亲不加定位,儿子会跑出去,儿子会以浏览器为基准点定位。


父亲有定位,儿子会以最近的基准点对齐。
在这里插入图片描述


子绝父相

子绝对定位,父亲相对定位。
相对定位 占有位置 不脱标
绝对定位 不占有位置 脱标
在实际开发中这个口诀用的很多


参考自哔哩哔哩


千思不得同枕梦,吾欲与卿度良辰。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章