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 ...
随机推荐
- TI CC2541的整体目标
1. App端会发送一定数量的byte过来蓝牙, 每2个byte是一个汉字的编码. 2. 拿到汉字编码之后, 统计字符数量, 然后通过SPI, 搜索编码 3. 收到的编码, 每个汉字字符有32个byt ...
- Android 常用工具类之DeviceInfoUtil
public class DeviceInfoUtil { private static WifiManager wifiManager = null; // wifi是否已连接 public sta ...
- IntelliJ IDEA---java的编译工具【转】
转自:http://baike.baidu.com/link?url=sEpS0rItaB9BiO3i-qCdGSYiTIVPSJfBTjSXXngtN2hBhGl1j36CYQORKrbpqMHqj ...
- 使用Jconsole监控weblogic的配置方法
在项目中发现full gc非常频繁.达到了每分钟13次.我怀疑可能会有内存泄露.于是在晚上找了内存泄露的资料. 内存长期占用并导致系统不稳定一般有两种可能: 1. 对象被大量创建而且被缓存,在旧的对象 ...
- Sqoop安装及操作
一.集群环境: Hostname IP Hadoop版本 Hadoop 功能 系统 node1 192.168.1.151 0.20.0 namenode hive+sqoop rhel5.4X86 ...
- 工作上的C/C++相关
LKSnapShot.h的line127某个类的声明中有: public: typedef TClient<LPeer, ACE_DEV_Connector> _TClient; 这种情况 ...
- Houdini Krakatoa Render Plugin
HDK真实个混蛋,都懒得写个解释.凭着函数英文意思猜测.. plugin sample video: 在极其残忍的开发环境,"Particle Voxel Render" 产生了( ...
- android post请求
参考文章:http://blog.csdn.net/lotusyangjun/article/details/22292445 http://blog.csdn.net/withiter/articl ...
- WinFormd多窗体 菜单和工具栏:
一.多窗体 1.哪个是主窗体 主窗体就是如果关掉这个窗体,程序就会退出的那个窗体1问题:主窗体隐藏了,关闭其它窗体后,没有将主窗体显示/关闭,那么程序就关不上了 办法:构造函数传值,将窗体传到另一个窗 ...
- 循环嵌套,while循环,穷举迭代循环
一.循环嵌套 简单的就是说,在一个for循环里嵌入多个小for循环. 其中,在打矩形.三角形和乘法口诀表之类的题目中,大for循环一般表示的是行数,其余的小for循环式每一行中的内容. 二.while ...