CSS的position属性在DIV层中的应用
发布时间：2013-10-09 15:09:43 作者：佚名 
我要评论
我要评论定位的话，父DIV设置position:relative后，子DIV的position:absolute就会相对父DIV作绝对定位，接下来为大家介绍下CSS的position属性在DIV层中的应用
原来只明白position:relative是相对定位，position:absolute 是绝对定位；
经常看到图片轮播的下方有个半透明背景的文字描述。我现在要做这样一个效果，因为不是轮播，所以没去找插件，想自己写。
半透明背景可以设置属性background: rgba(0, 0, 0, 0.15);
定位的话，父DIV设置position:relative后，子DIV的position:absolute就会相对父DIV作绝对定位。这样就很方便了。
.banner{margin:20px;height:204px;position:relative;overflow:hidden}
.banner .content{color:#FFF;font-size:24px;line-height:30px;font-weight:800;background: rgba(0, 0, 0, 0.15);position:absolute;left:0;right:0;bottom:0;}
效果：
经常看到图片轮播的下方有个半透明背景的文字描述。我现在要做这样一个效果，因为不是轮播，所以没去找插件，想自己写。
半透明背景可以设置属性background: rgba(0, 0, 0, 0.15);
定位的话，父DIV设置position:relative后，子DIV的position:absolute就会相对父DIV作绝对定位。这样就很方便了。
复制代码
代码如下:.banner{margin:20px;height:204px;position:relative;overflow:hidden}
.banner .content{color:#FFF;font-size:24px;line-height:30px;font-weight:800;background: rgba(0, 0, 0, 0.15);position:absolute;left:0;right:0;bottom:0;}
效果：
相关文章
- 这篇文章主要介绍了CSS的position属性的完全解析,包括position和overflow在一些相似使用方面的对比,需要的朋友可以参考下2015-11-06
- positon有4个属性:static relative absolute fixed，我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又2014-11-28
- 对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性，对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用2014-06-14
- position属性主要有四种属性值，任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative以及absolute，感兴趣的朋友可以了解下2013-12-09
- 当一个div想要定位时，我们第一反应是position属性，而position属性除了默认值外，还有absolute,relative和fixed，下面有个不错的示例，不懂的朋友可以参考下2013-11-11
- CSS定位中Position是必不可少的，其有四个属性static、relative、absolute、fixed，下面为大家详细介绍下，这个四个属性的使用场合，感兴趣的朋友不要错过2013-10-16
CSS样式position属性的一个小实例:z方向三层布局分析
使用CSS样式中的position属性实现z方向三层布局效果，本文甚是疑惑，于是乎搜集整理一番，晒出代码和大家分享一下2012-12-07- CSS position属性使用说明，需要的朋友可以参考下。2009-11-04
- 网页制作Webjx文章简介：position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现2009-04-02
- position有五个属性： static | relative | absolute | fixed | inherit，也许你看到这个标题觉得很简单，确实这是一篇关于CSS中Position属性基础知识的文章，但是关于Pos2015-11-27
最新评论