CSS positon 属性总结
来源:互联网 发布:淘宝客如何在微信推广 编辑:程序博客网 时间:2024/05/12 03:46
分析 CSS Positon属性:
1.
2.
1).absolute 绝对定位
2).relative 相对定位
3).fixed 固定定位
4).static 默认值,没有定位.
5).inherit 任何IE浏览器都不支持此属性值.
3.实例分析
绝对定位的元素的偏移根据距离该元素最近在已定位(绝对定位或相对定位)的包含元素(父对象)在位置来计算。如果不存在该包含元素,就把浏览器窗口作为包含元素。
代码:
<divstyle="background:blue;width:500px;height:50px;">dddgdfg</div>
<divstyle="position:absolute;top:50px;left:100px;background:red;width:200px;height:100px;">
</div>
分析:第二个div使用了绝对定位,它最近的没有被包含的绝对/相对定位的元素,所以它的父对象就是整个浏览器.效果如下:
如果是这样:
<divstyle="background:blue;width:500px;height:50px;position:absolute;top:100px;">dddgdfg</div>
<divstyle="position:absolute;top:50px;left:100px;background:red;width:200px;height:100px;">
</div>
分析:他们虽然都使用了绝对定位,但他们属于同级元素,没有被包含的元素.所以两个div都是以浏览器做为父对象.他们各不影响.效果如下:
如果是这样,有被包含的绝对/相对定位的元素,则根据它来移动.
<divstyle="background:blue;width:500px;height:50px;position:absolute;top:100px;">dddgdfg
</div>
效果图:
<divstyle="background:red;width:800px;height:100px;">dddgdfg</div>
<divstyle="background:black;width:500px;height:100px;position:relative;top:50px;left:100px;color:#FFF;">
</div>
效果图:
如果两个div都有相对定位呢?
<divstyle="background:black;width:500px;height:100px;position:relative;top:50px;left:100px;color:#FFF;">
</div>
效果图:
分析:第二个div 没动.两个div互不影响.
如果两个div都有相对定位,并且其中一个被包含,会怎样呢
<divstyle="background:red;width:800px;height:100px;position:relative;top:30px;">
</div>
效果图:
3>.fixed
分析代码:
<divstyle="background:#106ea2;position:fixed;top:20px;left:50px;color:#FFF;">logo说到底
</div>
<div style="background:#3c3c3c;color:#FFF;position:fixed;top:20px;right:50px;">加入收藏 | 联系我们
</div>
效果图:
如果被包含时,会怎么样呢
<divstyle="background:#3c3c3c;color:#FFF;position:fixed;top:20px;right:50px;">加入收藏 | 联系我们
</div>
</div>
效果图 跟上面的一样.
在用fixed 时,不用考虑父级元素,同级元素,只依据浏览器窗口定位.
- CSS positon 属性总结
- CSS positon absolute
- CSS之positon:absolute
- day14 Python css Positon relative
- POSITON
- CSS入门教程——定位(positon)
- day14 Python css positon学习 之 fixed
- day17 Python Css 之Positon __absolute
- CSS属性规则总结
- CSS重要属性总结
- css常用属性总结
- CSS属性总结
- css属性 知识总结
- 常用CSS属性总结
- css属性总结
- Div-CSS浮动(float,clear)-positon通俗讲解
- css中positon:relative与position:absolute的关系
- css常用样式属性总结
- ubuntu在线升级到12.04无法启动: no such partition
- 如何在程序中动态设置墙纸
- java中的各种方法
- 对象数组
- 程序员表白
- CSS positon 属性总结
- 解决JQuery的 slideDown()函数导致ie6的overflow失效的个人解决办法。
- Android导出APK里的数据库.db文件至SD卡
- 一个程序员的时间管理
- 删除双系统中linux
- HTML CSS样式细节-1
- Log4j配置详解[修改整理]
- Out of memory error in Eclipse
- Pick Release 代码流程图