CSS中元素位置的定位处理——绝对定位:
概念解释:
本案例通过一个图片新闻演示绝对定位:
分两部分,一部分设置相对的参考元素,另一部分是定位的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻</title>
<style type="text/css">
div {
width:256px;
border:1px solid red;
/* 父元素加上position仅仅是
为了便于子元素做绝对定位。
所以此处不设置偏移量。 */
position: relative;
}
p {
position: absolute;
left:0;
top:0;
border:1px solid blue;
width:256px;
margin:0;
text-align: center;
background-color: blue;
line-height: 30px;
}
</style>
</head>
<body>
<div>
<img alt="" src="../images/image1.png">
<p>小李子获得了小金人啦</p>
</div>
</body>
</html>
最终的页面效果: