这一次，我将为大家介绍html中位置的用法。html中位置的用法有哪些注意事项？下面是实战案例。让我们来看看。
昨天，我刚刚学习了一些html的内容，我迫不及待地在JD.COM上做了一个搜索栏。结果，我成功了。但是，我在做购物车结算的时候，不知道怎么添加一个显示在上面的数字。如果我想让数字随着购物车移动，我必须将它们放在一起，位置是绝对需要的。首先将数字的div的位置设置为绝对，有层次感。因为此时数字的位置的父标记是body，所以也可以将top和left设置到购物车想要的位置，但是如果改变了购物车的边距，两者就不能一起移动了，所以将购物车的位置设置为relative。这样，数字位置的父标记就变成了购物车，无论购物车的边距如何调整，数字都会随之移动...
<html>
<head>
<title>day03.html</title>
<style type="text/css">
/*首先写一个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:-15px;left:25px;
}
</style>
</head>
<body>
<div id="car">
去购物车付款
<div id="num">0</div>
</div>
</body>
</html>相信看完这些案例，你已经掌握了方法。更多精彩请关注AdminJS的其他相关文章！
相关阅读:
如何通过按钮触发实现背景色闪烁
HTML中定义的多个类属性无效
以上是html中位置用法的详细介绍。更多详情请关注AdminJS的其他相关文章！
