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前端（四）-元素定位方式（静态定位、相对定位、绝对定位、固定定位+浮动定位）

原文：https://www.cnblogs.com/XiaoCui-blog/p/15077589.html