CSS的position属性在DIV层中的应用

定位的话,父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;}

效果:

时间: 2016-10-10

CSS的position属性在DIV层中的应用的相关文章

js操作css属性实现div层展开关闭效果的方法

  本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <title>js操作div展开关闭</ti

js操作css属性实现div层展开关闭效果的方法_javascript技巧

本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma

css下position属性详解

写过CSS的人都免不了与position属性打交道,但是要真正理解position属性还不是一个很容易的事.前两天博主想在一个html页面上实现一个<div>元素重叠在另一个<div>元素上,并且位于该<div>元素的右下角的效果.在网上搜到他人的解决方法,并且也实现了,这里面最关键的就是利用position属性以及left.right.top.bottom等属性.为了更为透彻地理解背后原理,博主在网上搜了相关的资料,总算是有了一些认识,或许也只是一知半解,不过先写下来

css 实现浏览器窗口居中div层方法

 代码如下 复制代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

通过设置CSS中的position属性来固定层的位置_javascript技巧

定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" 实例 定位 h2 元素: h2 { position:absolute; left:100px; t

由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况-- 其实这问题我本来打算的是可以顺着一路扯到normal flow.containing block.bfc.margin collapse,base line,writing mode,bidi,这样一路问下去的,奈何第一个问题(亲我真的只问了position有哪些取值和行为啊)就悲剧了-- 说到position,那么稍微

CSS滤镜:Chroma属性

css|滤镜 Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下: Filter:Chroma(color=color) 这个属性的表达式是不是很简单,它只有一个参数.只需把您想要指定透明的颜色用Color参数设置出来就可以了.比如下面这幅图: 图中显示两种字体,两种颜色,我们现在对"leaves"字体添加chroma属性,使其透明.代码如下: <html> <head> <title>chroma filter</title

CSS中position属性之fixed实现div居中_javascript技巧

position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

css+div布局要素:文档流position属性 父级对象和同级对象

div+css布局要素:文档流position属性.父级对象和同级对象.从学div+css以来,一直对position几个属性的理解不够清晰.自己对position这一属性有了更深入和清晰的认识,同时让自己对整个div+css布局有了更深入的认识. 因为div实质是一个四方块,被很多业界人士形象的比喻成盒子.那么div+css布局的过程其实就是摆放这些盒子的过程.最近一周来,专门针对这个问题进行了深入的思考和研究.结果通过对这一问题的研究不仅让自己对position这一属性有了更深入和清晰的认识