首頁 > web前端 > 前端問答 > css3元素怎麼固定不滾動

css3元素怎麼固定不滾動

WBOY
發布: 2022-08-29 16:46:34
原創
1269 人瀏覽過

在css3中,可以利用position屬性來是元素固定不滾動,該屬性用於指定元素的定位類型,當屬性的值設定為fixed時,元素的位置相對於瀏覽器視窗是固定位置,可實現不捲動,語法為「元素{position:fixed;}」。

css3元素怎麼固定不滾動

本教學操作環境:windows10系統、CSS3&&HTML5版本、Dell G3電腦。

css3元素怎麼固定不滾動

在css中,可以使用position定位屬性來固定div在頁面的位置

position 屬性指定了元素的定位類型。

元素可以使用的頂部,底部,左側和右側屬性定位。然而,這些屬性無法運作,除非是先設定position屬性。他們也有不同的工作方式,這取決於定位方法。

fixed 定位

元素的位置相對於瀏覽器視窗是固定位置。

固定定位,相對於瀏覽器的建立進行定位,可以使用 top、right、bottom、left 這 4 個屬性來定義元素相對於瀏覽器視窗的位置。使用固定定位的元素無論如何滾動瀏覽器視窗元素的位置都是固定不變的。

範例如下:

<html>
<head>
<style type="text/css">
div{
position:fixed;
left:5px;
top:5px;
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
    <div></div>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><bbr/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><brr/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>sergsergsgs<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></><br/><br/>
</body>
</html>
登入後複製

輸出結果:

css3元素怎麼固定不滾動

#(學習影片分享:css影片教學html影片教學

以上是css3元素怎麼固定不滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板