曾经写网页,学css整体上不难,但就是元素定位,始终一知半解,直到今天,本着实践出真知的理念,经过认真测试,总结出了如下结论。

css 定位: position
static : 默认静止定位,元素在正常的文档流中无法移动定位。
absolute :独立元素,元素从文档流中脱离,会相对于父层(static定位的父层除外)移动定位。
relative : 相对定位,相对本身的位置移动定位,效果等同于相对于父层移动定位。
fixed: 固定定位,相对于窗口移动定位。

注:
1、移动定位是指通过 top,bottom,left,right属性来移动元素位置。

2、任何元素都有相对于父层定位的特性,所以当不用方向移动定位属性,而只用 margin 定位,则必然是相对的位移。

3、absolute 是“独立的,绝对”的意思,我觉得应该是取“独立的”意义更好理解。它所达到的效果就是元素从文档流中脱离,印证了独立存在的意义。

测试结果如下(static元素就不测试):

子元素 ( 相对于 =>) 父元素
absolute => static 绝对
fixed => static 绝对
relative => static 相对

absolute => absolute 相对
fixed => absolute 绝对
relative => absolute 相对

absolute => relative 相对
fixed => relative 绝对
relative => relative 相对

absolute => fixed 相对
fixed => fixed 绝对
relative => fixed 相对

<div class="size300_300" style="position:static; margin-left:100px;">
    <div class="size100_100" style="position:absolute; top:10px; ">son</div>
</div>

最新文章

  1. C#通过NPOI操作Excel
  2. linux基础知识总结
  3. SignalR 资料
  4. x86_64编译JPEG遇到Invalid configuration `x86_64-unknown-linux-gnu&#39;
  5. uboot启动参数
  6. .Net文件上传--小数据--un
  7. vb 和vb.net的区别
  8. UnityVS(Visual Studio Tools For Unity)的安装与使用
  9. POJ 2777(线段树)
  10. spark 监控--WebUi、Metrics System
  11. QT中异形窗口的绘制(winEvent处理WM_NCHITTEST消息)
  12. Powershell Switch 条件
  13. Mac OS X和iOS上基本数据类型的字节数
  14. Hadoop学习笔记(2)hadoop框架解析
  15. ARM流水线(pipeline)
  16. RabbitMQ安装以及java使用(一)
  17. 使用Hexo+Github一步步搭建属于自己的博客(进阶)
  18. 安装apache报没有找到VCRUNTIME40.dll错误
  19. python元组类型
  20. 带参数的main函数以及execl函数的应用

热门文章

  1. Android NDK 环境配置
  2. Android 测试自定义纯数字软键盘
  3. iOS--实时监控网络状态的改变
  4. C#向Sql数据库插入空值的控制
  5. Android_自己定义切换控件SwitchView
  6. AngularJs 常用
  7. Spring Boot实现STOMP协议的WebSocket
  8. nanoporetech/nanonet
  9. nanonets
  10. CASIO fx-991es Plus科学计算器使用技巧