HTML中position的五种属性值
来源:互联网 发布:交管12123一直网络失败 编辑:程序博客网 时间:2024/06/02 08:15
position的几种属性值:static, relative, absolute, fixed, inherit
<html ><head><meta http-equiv="content-type" content="text/html" charset="gb2312"><style> *{margin:0;padding:0} </style> </head> <body> <div style="position:absolute;height:400px;width:400px;background:yellow;left:80px;top:80px;"> <div style="position:absolute;height:200px;width:200px;background:red;left:100px;top:80px;"></div> <div style="position:relative;height:200px;width:200px;background:blue;left:186px;top:186px;"></div> <div style="position:fixed;height:140px;width:140px;background:black;left:20px;top:20px;"></div> </div> <div style="position:static;height:140px;width:140px;background:brown;left:220px;top:220px;"></div></body> </html>
效果截图
紫色(brown)的是static的,所以它的left和top没有起作用,一直跑到最上面去了
黑色(black)的是fixed的,所以它直接以浏览器窗口开始计算left和top的值
红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值,只是因为有一个是absolute所以产生了重叠效果,没有被另外一个挤走。
inherit是继承的意思,也就是使用和上一级父元素同样的width。其他的规则也是如此,inherit就表示继承父元素的值。
同时我也明白了另外一个道理,因为默认的类型都是static,所以当我们的页面长度等定位的不合理时一个会把一个挤走。
0 0
- HTML中position的五种属性值
- Position 的四种属性值
- position的4种属性
- position的几种属性
- spring事务的五种属性
- iOS开发中UIViewcontentMode的12种属性值
- Spring中几种属性的配置
- HTML中position的介绍
- HTML中Position的用法
- HTML中 position 的用法
- Hibernate session FlushMode有五种属性
- jsp:bean标签中scope属性的四种属性值理解
- Android中attr自定义属性详解(format的10种属性值)
- html中position的定位效果
- html中position的一个小用法
- Excel中工作薄几种属性的设置(C#)
- CSS中控制换行的四种属性
- Struts.xml <result>中type的几种属性
- 鱼眼相机
- windows访问Linux共享文件夹
- 更改默认pyyhon解释器
- 区间查询(树状数组之差点问线问题)
- php文件管理系统
- HTML中position的五种属性值
- ubuntu下安装JDK
- 实战ArduinoUNO制作高压编程器恢复Atmega8熔丝
- 日期之差
- 数据学习---数据结构1
- 语音识别工具箱之kaldi介绍
- Linux系统VNC配置实践总结
- android圆形的View控件
- from nova to ironic(4)