05.css入门笔记-定位

文章目录

前言

一、定位是什么？

一、定位原理

三、定位模式

1.静态定位 static

2.相对定位 relative（自恋型）

3.绝对定位 absolute （拼爹型）

4.固定定位 fixed

5.黏性定位 sticky

 6.定位叠放次序使用：z-index: 1

四、定位拓展

1、绝对定位的盒子不能使用 margin: 0 auto水平居中！但可以通过计算方法实现：

2、定位的特殊性

总结

---

---

前言

本次为大家分享我在学习css定位时候，总结的知识点笔记，希望对大家有帮助

一、定位是什么？

定位是让盒子可以在某个盒子或者屏幕区域自由移动，并且会压住其他的盒子

一、定位原理

定位 = 定位模式 + 边偏移

注意：

定位模式：指的一个盒子在文档中的定位方式

边偏移：决定了元素的最终位置

三、定位模式

定位模式是通过 css 的属性 ： position 来设置的

1.静态定位 static

指的是默认的定位方式，无定位的意思。按照标准流的摆放位置，没有边偏移，很少使用

代码（示例）：position: static

2.相对定位 relative（自恋型）

• 指元素在移动位置的时候，是相对于它原来的位置移动
• 不脱标，继续保留原来的位置

代码（示例）：position: relative

3.绝对定位 absolute （拼爹型）

• 指的是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
• 如果没有祖先元素或者祖先元素没有设置定位，则以浏览器为准定位
• 如果父元素有定位（relative、absolute、fixed），则以最近一级的有定位的父元素为准
• 绝对定位不在占有之前的位置，脱离标准流

代码（示例）：position: absolute

4.固定定位 fixed

• 以浏览器可视窗口为参照点移动元素
• 与父元素没有任何关系
• 不随滚动条滚动
• 固定定位不占有原来的位置

代码（示例）：position: fixed

固定定位案例小技巧：固定定位盒子，定位在版心的右侧

• 让固定定位盒子left:50%，走浏览器可视区的一半位置
• 让固定定位的盒子margin-left: 版心宽度的一半距离。

5.黏性定位 sticky

• 以浏览器的可视窗口为参照点移动元素
• 黏性定位占有原先的位置（相对定位特点）
• 必须添加top、left、bottom、right其中一个值
• 不常用，兼容性差，IE不支持

代码（示例）：position: sticky

 6.定位叠放次序使用：z-index: 1

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来者居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index 属性

---

四、定位拓展

1、绝对定位的盒子不能使用 margin: 0 auto水平居中！但可以通过计算方法实现：

代码（示例）：

水平居中：left: 50%;  //让盒子的左侧移动到父元素的水平中心位置

                margin-left: 向左移动盒子自身宽度的一半

垂直居中：top: 50%;

                margin-top: 向下移动盒子自身宽度的一半

固定定位同理

---

2、定位的特殊性

• 绝对定位和固定定位也和浮动类似
• 行内元素添加绝对定位或者固定定位后，脱离标准流，可以直接设置宽度和高度
• 块级元素添加绝对或者固定定位后，脱离标准流，如果不给宽度或者高度，默认大小是内容的大小
• 脱标的盒子是不会触发外边距塌陷的：浮动、固定定位、绝对定位的元素都不会触发外边距合并的问题（不知道外边距合并的伙伴，可以看一下03篇css盒模型里有分享到哦）
• 浮动定位：设置浮动后，只会压住下面标准流的盒子，但不会压住标准流盒子里的内容！因为浮动的最初目的是做文字环绕效果
• 绝对定位和固定定位：设置定位后，会压住下面标准流所有的内容。定位是可以让盒子在某个盒子或屏幕中自由移动，而且会压住其他的盒子

---

总结

以上就是今天分享的关于定位的内容，其中绝对定位absolute 和 相对定位 relative 大多分情况下都是搭配使用的，大家可以记住一个口诀：子绝父相。