CSS 布局模型的position属性
来源:互联网 发布:mac能用六维空间吗 编辑:程序博客网 时间:2024/06/03 16:36
position属性的3种可能情况分别是absolute、relative&fixed
(1)absolute 绝对定位
div{ width:200px; height:200px;border:2px red solid;position:absolute;top:20px;right:100px; }</style></head><body><div id="div1"></div></body></html>
效果如图:
<style type="text/css">#div1{ width:200px; height:200px;border:2px red solid;position:relative;left:100px;top:50px; }</style></head><body><div id="div1"></div>偏移前的位置保留不动<span>覆盖不了移动之前的位置,后面的内容依然紧跟在移动前的占位上</span></body></html>
(3)fixed 固定定位
<style type="text/css">#div1{ width:200px; height:200px;border:2px red solid;position:fixed;bottom:0;right:0; }</style></head><body><div id="div1"></div><p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p></body></html>效果如图:可以实现在浏览器屏幕右下角定位div1元素。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化。
以上为听课整理的笔记。完
阅读全文
1 0
- CSS 布局模型的position属性
- 关于CSS的布局:position属性
- CSS布局中position的各种属性
- CSS布局之【Position】属性
- CSS的position属性
- CSS的position属性
- CSS的position属性
- css 的position属性
- css的属性position
- CSS布局---display position float属性谈起
- CSS布局display,position, float属性
- CSS布局-----display,position, float属性
- css布局中的position各种属性
- css的position属性详解
- CSS的Position属性学习
- css中position的属性
- 浅谈CSS的position属性
- CSS的Position属性详解
- 逻辑回归
- mysql存储引擎的介绍和选择
- 使用函数输出一个整数的逆序数
- Tomcat利用MSM实现Session共享方案
- 关于C++托管和非托管
- CSS 布局模型的position属性
- Java入门测试题,测测你基础知识掌握程度(附答案)
- WDK7600编译出现 error LNK1218
- Java List 排序
- python键盘钢琴
- java 上传文件到服务器之jquery.uploadify
- Redis之AOF文件持久化
- MySQL定时执行脚本(计划任务)命令实例
- websphere更新web.xml