wangjie-fourth 的个人博客

记录精彩的程序人生

目录
CSS定位、层叠上下文
/      

CSS定位、层叠上下文

CSS是层叠样式表,这个层叠可以体现在某个元素。其实网页上呈现的是二维,但在逻辑上,需要理解成三维,这就是层叠上下文

image.png

  • 定位元素:非static定位的标签,就是定位元素;
  • 块级子元素:如div标签
  • 浮动元素:flex布局的元素
  • 内联子元素:如span标签、文字等

1、如何创建一个层叠上下文
层叠上下文上面有介绍。不过常用的有:

  • z-index
  • flex
  • opacity
  • transform

理解盒模型中的background

image.png
1、盒子模型中background范围是从哪到哪
是从border外边沿围成的区域。
2、如何验证
image.png

理解脱离文档流

之前说flex布局的元素会脱离文档流,其实就是将这个元素抬高一点,让它比文档流高一点。

一、CSS的定位

CSS的定位指的是垂直于屏幕的,而CSS的布局指的是屏幕平面上的。CSS定位是通过position属性区分,分为:

  • static:默认值,此时元素就在文档流中;
  • relative:相对定位,此时元素比static元素高一点,但还处于文档流中;
  • absolute:绝对定位,是相当于其非static祖先来定位的;
  • fixed:固定定位,是相当于视口定位的;
  • sticky:粘滞定位,常用于标题;

当标签不是static定位的,它就是定位元素。通过z-index来控制它的高度。

使用时,需要注意的点:

  • 使用absolute时,一般要在父标签上用relative
  • 使用absolutefixed时,一定要补个topleft
  • sticky兼容性很差,可能使用并不广泛

position:relative定位

1、使用场景
一般用于给absolute元素的父标签定位
2、配合z-index

  • z-index:auto:默认值,不创建新的层叠上下文
  • z-index:0z-index:auto不等价

position:absolute定位

1、使用场景
脱离原来页面的位置,另起一层。常见的有:

  • 对话框的关闭按钮
  • 鼠标的提示

2、配合z-index

  • z-index:auto:默认值,不创建新的层叠上下文
  • z-index:0z-index:auto不等价

3、注意

  • absoulte不是相对于relative定位的,是相对于祖先里非static的元素
  • 如果不写topleft的话,某些游览器会位置错乱;

4、相关实现
image.png

position:fixed定位

1、使用场景

  • 广告
  • 回到顶部的按钮

视口:当前游览的窗口

2、配合z-index

  • z-index:auto:默认值,不创建新的层叠上下文
  • z-index:0z-index:auto不等价

3、注意

  • 手机上尽量不要使用这个属性,坑很多

4、实现
image.png

position:sticky定位

在正常可以看到的情况下,就是普通的文档流。一但要超过这里,就会以黏住的特性。
相关实现:
image.png


CSS技巧

1、文字内容不准换行

white-space: nowrap;
评论