position定位

三种定位机制: 静态定位,相对定位,绝对定位
四中属性值:

  1. static
  2. relative
  3. absolute
  4. fixed

如果处于文档流中,则占用文档空间,对它的兄弟元素仍有影响
如果是脱离了文档流,则对它的兄弟元素没有影响

absolute和fixed均属于绝对定位

相对定位

特点:

  1. 是相对于自身原有位置进行偏移
  2. 仍处于文档流中,也就是占用文档空间,对它的兄弟元素仍会有影响
  3. 随即拥有偏移属性和z-index属性

绝对定位

特点:

  1. 基于已经定位的祖先元素进行定位
  2. 脱离了文档流,不会对兄弟元素产生影响
  3. 随即拥有了偏移属性和z-index属性
  4. 如果设置绝对定位的元素没有设置width,那么它的width就等于其内容的宽度,类似于设置了float的元素
    注意:已经定位的祖先元素指的是祖先元素设置了相对定位、绝对定位或固定定位中的任一种定位

如果对元素设置了绝对定位,没有设置偏移量,且没有已经定位的祖先元素,则该元素仍然处于它的初始位置

设置偏移量

  1. 如果没有已经定位的祖先元素,则相对于<html>标签进行偏移
  2. 如果有已经定位的祖先元素,则相对于其最近的已经定位的祖先元素进行偏移

使用绝对定位进行两列布局

常用于一列固定宽度,一列自适应宽度的布局
主要应用技能:

  1. 父元素使用:relative
  2. 需要自适应宽度的列使用absolute
    注意:因为设置了absolute的元素,脱离了标准文档流,所以其无法撑开父元素,因此必须使固定宽度列的高度 > 自适应宽度列的高度
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容