html中position用法說明
發(fā)表時(shí)間：2024-05-03 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)韍tml中position用法介紹，html中position用法的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。昨天剛學(xué)了html的一些內(nèi)容，就迫不及待的想做個(gè)京東上面的搜索條，結(jié)果做是做出來了，不過在做那個(gè)購物車結(jié)算的時(shí)候，有個(gè)上面顯示的數(shù)字不知道該怎么加了，如果想讓數(shù)字跟著購...
這次給大家?guī)韍tml中
position用法介紹，html中position用法的
注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。
昨天剛學(xué)了html的一些內(nèi)容，就迫不及待的想做個(gè)京東上面的搜索條，結(jié)果做是做出來了，不過在做那個(gè)購物車結(jié)算的時(shí)候，有個(gè)上面顯示的數(shù)字不知道該怎么加了，如果想讓數(shù)字跟著購物車一起動(dòng)的話，就必須將它們兩個(gè)定位在一起，定位的話肯定就需要position，首先將數(shù)字的div的position設(shè)置為absolute，有一種層的感覺，因?yàn)榇藭r(shí)的數(shù)字的position的父標(biāo)記是body所以設(shè)置top和left的時(shí)候也可以設(shè)置到和購物車想要的位置，不過將購物車的margin改變的話，兩個(gè)無法一起動(dòng)，所以就把購物車的position設(shè)置成為relative，這樣數(shù)字的position的父標(biāo)記就變成了購物車，無論購物車的margin怎么調(diào)，數(shù)字都會(huì)跟著它一起動(dòng)了.....
<html>
<head>
<title>day03.html</title>
<style type="text/css">
/*首先寫一個(gè)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>相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
怎樣用按鈕觸發(fā)實(shí)現(xiàn)背景色的閃爍
HTML中定義多個(gè)class屬性無效
以上就是html中position用法介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
