Web前端(四)-元素定位方式(静态定位、相对定位、绝对定位、固定定位+浮动定位)

元素定位方式

  • position定位: 静态定位,相对定位,绝对定位,固定定位

  • 浮动定位

     

静态定位(默认)

  • 格式: position: static;

  • 静态定位也称为文档流定位

  • 特点: 元素以左上为基准依次平铺开,不能实现层叠效果

  • 如何控制元素位置?

    通过外边距margin来控制

 

相对定位

  • 格式: position: relative;

  • 特点: 元素不脱离文档流

  • 应用场景: 当需要移动某个元素 又不想让其它元素受影响时使用

  • 如何控制元素位置?

    通过left/right/top/bottom 相对于元素初始位置做偏移

 

绝对定位

  • 格式: position:absolute;

  • 特点: 元素脱离文档流

  • 如何控制元素位置?

    通过left/right/top/bottom 相对窗口(默认)或某个上级元素做位置偏移(需要在上级元素中添加 position:relative)

  • 应用场景: 当需要往页面中添加一个元素,并且不影响其它元素的显示效果时使用

 

固定定位

  • 格式: position:fixed;

  • 特点: 元素脱离文档流

  • 如何控制元素位置?

    通过left/right/top/bottom 相对于窗口做位置偏移

  • 应用场景: 当需要将内容固定在窗口某个位置的时候使用

 

浮动定位

  • 格式: float:left/right;

  • 特点: 脱离文档流, 元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素的时候停止

  • 浮动元素一行装不下的话会自动换行, 换行时有可能被卡住

  • 当元素的所有子元素全部浮动时,自动识别的高度为0 , 识别高度为0会导致页面显示异常, 通过给上级元素添加overflow:hidden解决

  • 应用场景: 将纵向排列改成横向排列时使用

 

Web前端(四)-元素定位方式(静态定位、相对定位、绝对定位、固定定位+浮动定位)

上一篇:HTML&JSP


下一篇:【js】Leetcode每日一题-数组异或操作