div+css的position

来源:互联网 发布:智能手机定位软件 编辑:程序博客网 时间:2024/06/05 08:17

前一阵子给公司设计部培训div+css,有一个地方自己也不是记得很牢靠,现在写一个笔记记下来。

1.css中absolute和relative之间的关系。如果外层div定义一个relative,那么内层的div可以用absolute去进行绝对的位置。

2.如果外层div没有position的属性,可以用relative对所有的内层div进行沙盘式的布局。

3.同时可以用relative配合滤镜这个工具进行覆盖操作,贴一个上次培训的时候用的代码。

<style type="text/css">
.out{width:100px;height:150px;}
.out .pic{width:100px;height:150px;}
.out .det{width:100px;height:20px;position:relative;z-index:99;bottom:20px;background:#000;filter:alpha(opacity=45);opacity:0.45;}
</style>
</head>
<body>
<div class="out">
<div class="pic"><img src="100.jpg" /></div>
<div class="det"><span style=" color:#FFF">测试</span></div>
</div>


原创粉丝点击