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 ...
随机推荐
- How to create UrlSlug in Asp.Net MVC
转自:http://www.ehsanghanbari.com/Post/20/how-to-create-urlslug-in-aspnet-mvc UrlSlug Is a way of gene ...
- Oracle之Union与Union all的区别
如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来. union和unio ...
- setw和setfill控制输出间隔
在C++中,setw(int n)用来控制输出间隔.例如:cout<<'s'<<setw(8)<<'a'<<endl;则在屏幕显示s a //s与a之间 ...
- 使用Window Live Writer写博客
1.打开“日志账户”—>“日志选项”. 2.点击“更新账户信息”. 3.输入博客地址,用户名和密码,点击“下一步”. 4.耐心等待片刻... 5.设置“日志昵称”,点击“完成”. 这样就大功告成 ...
- javascript学习(一) 异常处理与简单的事件
一:异常处理 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></ti ...
- 【20160924】GOCVHelper MFC增强算法(2)
//创建或续写目录下的csv文件,填写“文件位置-分类”对 int writeCsv(const string& filename,const Vector<pair<st ...
- lhgdialog在打开的窗口里点击按钮关闭当前窗口
lhgdialog在打开的窗口里点击按钮关闭当前窗口 var api = frameElement.api, W = api.opener; api.close();
- sorl维护索引库sorl4j的使用
1.维护索引库 添加:添加一个json格式的文件就可以. 修改:在solr中没有update,只需要添加一个新的文档,要求文档id和被修改文档的id一致.原理是先删除后添加. 删除:使用xml格式. ...
- 循环嵌套,while循环,穷举迭代循环
一.循环嵌套 简单的就是说,在一个for循环里嵌入多个小for循环. 其中,在打矩形.三角形和乘法口诀表之类的题目中,大for循环一般表示的是行数,其余的小for循环式每一行中的内容. 二.while ...
- 15款开源PHP类库
PHP库给开发者提供了一个标准接口,它帮助开发者在PHP里充分利用面向对象编程.这些库为特定类型的内置功能提供了一个标准的API,允许类可以与PHP引擎进行无缝的交互.此外,开发者使用这些类库还可以简 ...