关于css:CSS定位

1次阅读

共计 575 个字符,预计需要花费 2 分钟才能阅读完成。

div 分层

从上到下顺次分为:

  • 内联子元素
  • 浮动元素 脱离文档流
  • 块级子元素 块级元素若文字呈现重叠的状况,是以文字呈现的先后顺序进行笼罩
  • border
  • background

新属性 -position

属性值:

  • static 默认值,待在文档流里。
  • relative 绝对定位,升起来,但不脱离文档流
  • absolute 相对定位,定位基准是先人里的非 static 比方敞开按钮 留神:应用 absolute,其父元素须要加 relative
    备注:元素会被移出失常文档流,并不为元素预留空间,通过指定元素绝对于最近的非 static 定位先人元素的偏移,来确定元素地位。
  • fixed 固定定位,定位基准是 viewport 手机上尽量不要应用这个属性
    元素会被移出失常文档流,并不为元素预留空间,而是通过指定元素绝对于屏幕视口(viewport)的地位来指定元素地位。
  • sticky 粘滞定位

默认每个元素的 z -index 是 auto,而 auto 计算出来的值为 0.
white-space:nowrap;– 文字内容不准换行

层叠上下文


层叠上下文造成条件(须要记忆):

  • 根元素(html)
  • z-index 不为 auto 的相对 / 绝对定位
  • opacity 属性小于 1 的元素
  • transform 的值不为 none 的元素
  • 一个 z -index 值不为 auto 的 flex 我的项目,即父元素 display:flex;
  • 固定定位元素和 sticky 定位元素
正文完
 0