明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

html中position用法說明

發(fā)表時間：2023-09-18 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)韍tml中position用法介紹，html中position用法的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。昨天剛學了html的一些內(nèi)容，就迫不及待的想做個京東上面的搜索條，結(jié)果做是做出來了，不過在做那個購物車結(jié)算的時候，有個上面顯示的數(shù)字不知道該怎么加了，如果想讓數(shù)字跟著購...
這次給大家?guī)韍tml中position用法介紹，html中position用法的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

昨天剛學了html的一些內(nèi)容，就迫不及待的想做個京東上面的搜索條，結(jié)果做是做出來了，不過在做那個購物車結(jié)算的時候，有個上面顯示的數(shù)字不知道該怎么加了，如果想讓數(shù)字跟著購物車一起動的話，就必須將它們兩個定位在一起，定位的話肯定就需要position，首先將數(shù)字的div的position設置為absolute，有一種層的感覺，因為此時的數(shù)字的position的父標記是body所以設置top和left的時候也可以設置到和購物車想要的位置，不過將購物車的margin改變的話，兩個無法一起動，所以就把購物車的position設置成為relative，這樣數(shù)字的position的父標記就變成了購物車，無論購物車的margin怎么調(diào)，數(shù)字都會跟著它一起動了.....

<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>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

怎樣用按鈕觸發(fā)實現(xiàn)背景色的閃爍

HTML中定義多個class屬性無效

以上就是html中position用法介紹的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。