CSS的position屬性是用來指定HTML元素的定位方式的。有三種定位方式:static(默認方式)、relative(相對定位)和absolute(絕對定位)。而使用絕對定位的元素,其位置是相對于父元素的定位位置來確定的,不受其他元素影響。
滾動滑動是實現網站動態展示的常用方式之一,其中比較重要的一個因素就是元素的位置定位。通過使用position屬性實現絕對定位,我們就可以將所需要展現的元素,如圖片、文本等,置于所期望的位置之中,并且不會受到其他元素影響。
/* HTML */ <div class="container"> <p>這是一段文本描述。</p> <p>這是另一段文本描述。</p> </div> /* CSS */ .container { position: relative; width: 100%; height: 3000px; } img { position: absolute; } img:first-of-type { top: 500px; left: 100px; } p:first-of-type { position: absolute; top: 700px; left: 400px; } img:last-of-type { top: 1500px; left: 600px; } p:last-of-type { position: absolute; top: 1800px; left: 100px; }
通過以上代碼的實現,頁面中的四個元素就能夠被準確地定位到期望的位置了。其中,container元素作為父元素,通過設置寬度和高度的方式來限制滾動條的長度。而其余元素則通過設置絕對定位,并通過top和left屬性來確定其相對于container元素的位置,實現了滑動滾動的效果。
上一篇css實現著重號
下一篇php React教程