CSS中应用position的absolute和relative的属性制作浮动层
我的浮动层结构大概如下:
<div id="father">
<div id="son">
</div>
</div>
要实现的是son层的浮动。
刚开始的时候想着通过z-index的值来实现不同的层,position属性都没有特别关注。
但是结果怎么也出不来,后来查找资料得知position属性可以理解为是本元素针对父元素的定位。
只要把本元素的position属性设置为:absolute,然后把父元素的position属性设置为:relative,那么本元素的left,top属性就是针对父元素的值了,而不是正对document窗口了。
本例中当father的position为relative时,son的position为absolute才有效。这时候son的left:0;top:0就不再针对document窗口了,而是针对id为father的这个div了。
参考网址:http://blog.csdn.net/redhat456/article/details/2574361
CSS中应用position的absolute和relative的属性制作浮动层的更多相关文章
- css中的position 的absolute和relative的区别(转)
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- css中的position:relative和absolute 属性
语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- 关于css中的position定位
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...
- css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Positio ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- css中的大小、定位、轮廓相关属性
css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...
随机推荐
- Javascript Regexp match and replace
# add a new article reference to database function addnewpub() { var year = $("input#year" ...
- Understanding the RelationshipType Enumeration [AX 2012]
Understanding the RelationshipType Enumeration [AX 2012] 3 out of 3 rated this helpful - Rate this t ...
- C# Driver LINQ Tutorial
1.介绍 该教程涵盖了1.8版本的C#驱动中的LINQ查询.你可能已经阅读最新的C# Driver Tutorial. 2.快速开始 首先,给程序添加下面的using声明 using MongoDB. ...
- NSAssert用法
今天突然发现了一个开发ios程序时调试的好帮手-NSAssert()函数.而且和NSLog()函数一样简单易用,代码如下: NSAssert(x!=0,@"x must not be zer ...
- POJ 2763:Housewife Wind(树链剖分)
http://poj.org/problem?id=2763 题意:给出 n 个点, n-1 条带权边, 询问是询问 s 到 v 的权值, 修改是修改存储时候的第 i 条边的权值. 思路:树链剖分之修 ...
- HDU 1827:Summer Holiday(强连通)
http://acm.hdu.edu.cn/showproblem.php?pid=1827 思路:强连通分量缩点后找入度为0的点,然后对于属于该强连通分量的找一个最小耗费的入口. #include ...
- sharepoint 开发
1. 客户端界面搜索 <div> 业务员:<).match(reg); ]);return null; } function search() { var k=document.ge ...
- java中+的使用
在java中+可以做为连接符和运算符两种使用方法 例如: 代码: int X=100; int Y=200; System.out.println("X+Y=" + (X + ...
- YTU 3022: 完全二叉树(1)
原文链接:https://www.dreamwings.cn/ytu3022/2595.html 3022: 完全二叉树(1) 时间限制: 1 Sec 内存限制: 128 MB 提交: 26 解决 ...
- 数据库连接池(DBCP:为数据统一建立一个缓冲池,现在企业开发使用)
数据库连接池:(里面放了许多连接数据的链接,负责分配,管理,释放数据库连接,可重复使用连接,而不新建 )为数据统一连接建立一个缓冲池,放好了一定数据库连接,使用时在缓冲池里面拿,用完之后再还给缓冲池 ...