HTML&CSS——css中postion的fixed与absolute区别详解
2016-05-10 11:31
627 查看
fixed
固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px)
absolute
绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角,举个例子
复制代码
代码如下:
<div style="posistion:relative" id="p1">
<div style="posistion:fixed" id="p2">
<div style="position:static" id="p3">
<h2 style="postion:absolute;left:10px;top:10px">我的参照坐标是id=p2</h2>
</div>
</div>
</div>
通过上面的例子,可知h2的绝对定位参照点是id=p2的父元素,p3是静态的static定位,不能当作定位点
固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px)
absolute
绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角,举个例子
复制代码
代码如下:
<div style="posistion:relative" id="p1">
<div style="posistion:fixed" id="p2">
<div style="position:static" id="p3">
<h2 style="postion:absolute;left:10px;top:10px">我的参照坐标是id=p2</h2>
</div>
</div>
</div>
通过上面的例子,可知h2的绝对定位参照点是id=p2的父元素,p3是静态的static定位,不能当作定位点
相关文章推荐
- HTML&CSS——Position属性四个值:fixed、absolute和relative的区别和用法
- css--盒子模型和层叠关系
- PHPCMS 分页样式
- CSS知识点总结
- 有序无序列表样式设置
- 【less.js扫雷系列一】--less和CSS同时时使用时,可能出现的样式优先级变化导致样式覆盖问题
- 编码规范之编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范
- CSS 动画的 steps()
- 脚本化CSS
- test文章样式
- 深入理解CSS线性渐变linear-gradient
- CSS样式层叠权重值
- CSS3组件化之圆波扩散
- css样式优先级详解
- 用CSS实现文本框尖角
- css在未知高度的情况下实现垂直居中
- CSS基本语法和选择器
- 什么是CSS?&CSS的三种使用方式
- 为html.EditorFor添加样式
- 用css控制一个DIV画图标。