本文介绍了CSS中absolute和relative属性的应用技巧，包括如何通过relative为内层元素创建定位上下文，以及如何利用absolute实现精确布局。此外，还提供了一个使用relative配合滤镜实现图片覆盖效果的示例。
前一阵子给公司设计部培训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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
