主要知识点：
1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位）
position:static/relative/absolute/fixed/sticky。
2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。
效果图：
效果说明：故宫文字段落设置背景色黑色透明，覆盖在图片底部。
参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css布局基础：定位练习1|www.125jz.com</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 170px;
height: 120px;
border: 1px double #696969;
position: relative;
}
img {
width: 150px;
height: 100px;
margin: 10px;
}
p {
width: 150px;
height: 30px;
background-color: #000000;
opacity: 0.7;
text-align: center;
line-height: 30px;
color: white;
position: absolute;
bottom: 10px;
left: 10px;
}
</style>
</head>
<body>
<div>
<img src="img/图片2.jpg" />
<p>故宫</p>
</div>
</body>
</html>
本文来自投稿，不代表125jz立场，如若转载，请注明出处：http://www.125jz.com/5535.html
微信扫一扫 
支付宝扫一扫 