【web前端开发 | CSS】页面布局之定位

思维导图

（案例放在文章结尾）

文章目录

思维导图
- 一：定位
- - 1.1：静态定位（position：static；）
  - 1.2：相对定位（position：relative；）
  - 1.3：绝对定位（position：absolute；）
  - 1.4：固定定位（position: fixed;）
  - 1.5：粘性定位（position: sticky;）
- 二：定位的叠放次序（z-index）
- 三：绝对定位居中
- 四：特殊用法
- 五：元素的显示与隐藏（只隐藏，不删除）
- - 5.1：display
  - 5.2：visibility
  - 5.3 ：overflow（溢出）

一：定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置

定位模式

属性	定位
static	静态定位，默认定位方式，无定位，没有边偏移，很少使用
relative	相对定位，自恋型，不脱标，定位后原位置保留，子绝父相
absolute	绝对定位，拼爹型，脱标，不占有原来位置，子绝父相
fixed	固定定位，可视区域，固定在版心，脱标
sticky	粘性定位，不脱标，占有原来位置

边偏移

属性	描述
top	顶部偏移量，定义元素相对于其父元素上边线的距离。
right	右侧偏移量，定义元素相对于其父元素右边线的距离。
bottom	底部偏移量，定义元素相对于其父元素下边线的距离。
left	左侧偏移量，定义元素相对于其父元素左边线的距离。

1.1：静态定位（position：static；）

静态定位是元素的默认定位方式，无定位的意思。

▷静态定位按照标准流特性摆放位置，它没有边偏移
▷静态定位在布局时很少用到

1.2：相对定位（position：relative；）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）

▷相对定位相对于它本身的位置移动
▷原来在标准流的位置继续占有，并且后面的盒子依旧以标准流的方式对待
▷子绝父相（下一个定位解释见）

1.3：绝对定位（position：absolute；）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

▷祖先元素

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准，进行移动
如果父级元素有定位（相对，绝对，固定定位都可），则以最近一级且具有定位的父级为准进行移动，，，，子绝父相！！！

▷绝对定位不再占有原先的位置。（脱标）

子绝父相

这句话的意思是：子级是绝对定位的话，父级要用相对定位。

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位，当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

1.4：固定定位（position: fixed;）

固定定位主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

▷元素固定于浏览器可视区的位置。

跟父元素没有任何关系
不随滚动条滚动。

▷固定定位不在占有原先的位置。（脱标）其实固定定位也可以看做是一种特殊的绝对定位。

▷小应用：如果需要将其固定在版心位置，则可以（意会，不想把代码贴上来，没有意义，还影响观感，大概就是底下这个意思）

position: fixed;
left ：50%；
margin-left:(版心width)/2

让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。

1.5：粘性定位（position: sticky;）

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

▷占有原先位置，不脱离文档流（相对定位特点）
▷必须添加一个边偏移
▷以浏览器的可视窗口为参照点移动元素（固定定位特点）

跟页面滚动搭配使用。兼容性较差，IE 不支持

二：定位的叠放次序（z-index）

1：一般取值正整数，负整数，0，默认auto
2：数值越大，盒子越往上
3：如果不规定层叠次序，则后来居上
4：取值不加单位
5：只有定位的盒子才会有这个属性。

【叽叽歪歪】上一个不加单位的还是 font-weigh: ;(设置字体粗细)，，，然后z-index这个属性，其实在写这篇的时候，它在我后面的学习中还出现过，不过还没理清下一篇思路，先不写，记住这个的第五点，定位这一趴就可以了。下一篇见。

三：绝对定位居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;：让盒子向左移动自身宽度的一半

四：特殊用法

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
绝对定位（固定定位）会完全压住盒子

浮动→不会压住文字（文字环绕）
绝对/固定定位→会完全压住，标准流下的所有东西

五：元素的显示与隐藏（只隐藏，不删除）

5.1：display

属性	描述
display: none ；	隐藏对象
display：block ；	除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置。

后面应用及其广泛，搭配 JS 可以做很多的网页特效

5.2：visibility

属性	描述
visibility：visible ;	元素可视
visibility：hidden;	元素隐藏
visibility：inherit	继承父级的可视

如果隐藏元素想要原来位置，就用 visibility：hidden

如果隐藏元素不想要原来位置，就用 display：none

5.3 ：overflow（溢出）

属性	描述
overflow：hidden；	不显示溢出部分
overflow：visibl；	不剪切东西也不会有滚动条
overflow：scroll；	无论内容是否溢出，都会有滚动条
overflow：auto；	只有内容有溢出时，才会有滚动条，内容在盒子内不会超出，则不会有滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分

绝对定位、固定定位会把盒子变成类似于行内块的形式

案例：淘宝轮播图（但只写个界面）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.tb_banner {position: relative;width: 520px;height: 280px;margin: 100px auto;}.tb_banner a:hover {color: darkblue;}.tb_banner .left,.tb_banner .right {position: absolute;width: 20px;height: 30px;background-color: rgba(0, 0, 0, .3);text-decoration: none;color: #fff;top: 50%;text-align: center;line-height: 30px;margin-top: -15px;}.tb_banner .left {left: 0;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.tb_banner .right {right: 0;border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.dian {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background-color: rgba(255, 255, 255, .3);border-radius: 7px;}.dian li {width: 8px;height: 8px;float: left;background-color: #fff;border-radius: 50%;margin: 3px;}.dian li:hover {background-color: orange;}</style>
</head><body><div class="tb_banner"><img src="data:images/b1.jpg" alt="主图"><a href="#" class="left">&lt;</a><a href="#" class="right">&gt;</a><ul class="dian"><li></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

运行截图

案例二：就类似播放器的首页的一小模块（遮罩）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 224px;height: 336px;margin: 30px auto;position: relative;}img {width: 100%;height: 100%;}.zhe {width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;background: rgba(30, 30, 30, .4) url(images/播放按钮.png) no-repeat center;display: none;}.box:hover .zhe {display: block;}</style>
</head><body><div class="box"><img src="data:images/偷心画师.jpg" alt="偷心画师" title="偷心画师"><div class="zhe"></div></div>
</body></html>

【叽叽歪歪】突然发现还是没有注释，不过不难理解（希望下次复习我还能看的懂，理不清的话，那就再加注释）