当前位置:Gxlcms > html代码 > html中position的用法使用介绍

html中position的用法使用介绍

时间:2021-07-01 10:21:17 帮助过:50人阅读

想必大家对html中position属性并不陌生吧,使用它可以完成普通标签完成不了的任务,下面有个不错的示例,大家可以参考下 昨天刚学了html的一些内容,就迫不及待的想做个京东上面的搜索条,结果做是做出来了,不过在做那个购物车结算的时候,有个上面显示的数字不知道该怎么加了,如果想让数字跟着购物车一起动的话,就必须将它们两个定位在一起,定位的话肯定就需要position,首先将数字的p的position设置为absolute,有一种层的感觉,因为此时的数字的position的父标记是body所以设置top和left的时候也可以设置到和购物车想要的位置,不过将购物车的margin改变的话,两个无法一起动,所以就把购物车的position设置成为relative,这样数字的position的父标记就变成了购物车,无论购物车的margin怎么调,数字都会跟着它一起动了.....

代码如下:

<html> 
<head> 
<title>day03.html</title> 
<style type="text/css"> 
/*首先写一个position的p*/ 
#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> 
<p id="car"> 
去购物车付款 
<p id="num">0</p> 
</p> 
</body> 
</html>

更多html中position的用法使用介绍相关文章请关注PHP中文网!

人气教程排行