html中position的1个小用法应用详细介绍

昨日刚学了html的1些內容,就急不可耐的想做个京东上面的检索条,結果做是做出来了,但是在做那个买东西车清算的情况下,有个上面显示信息的数据不知道道该如何加了,假如想让数据跟随买东西车1启动的话,就务必将它们两个精准定位在1起,精准定位的话毫无疑问就必须position,最先将数据的div的position设定为absolute,有1种层的觉得,由于此时的数据的position的父标识是body因此设定top和left的情况下还可以设定到和买东西车要想的部位,但是将买东西车的margin更改的话,两个没法1启动,因此就把买东西车的position设定变成relative,这样数据的position的父标识就变为了买东西车,不管买东西车的margin如何调,数据都会跟随它1启动了.....

拷贝编码
编码以下:

<html>
<head>
<title>day03.html</title>
<style type="text/css">
/*最先写1个position的div*/
#car{
width:150px;height:30px;
background: #999999;
color:white;text-align: center;
line-height: 30px;margin: 232px 300px;
border:1px solid black;position: relative;
}
#num{
width:20px;height:20px;background: red;
color:white;text-aligh:center;
line-height:20px;position: absolute;
top:⑴5px;left:25px;
}
</style>
</head>
<body>
<div id="car">
去买东西车支付
<div id="num">0</div>
</div>
</body>
</html>