定位的四種模式:static,relative,absolute,fixed
定位的四個位置:left,right,top,bottom
定位屬性:position,有四種狀態值
1.static:靜態定位,按元素在文檔流中的順序排列,這是預設值,四個位置無效
2.relative:相對定位,元素相對於原來它在文檔流中的位置進行定位,四個位置有效
3.absolute:絕對定位,元素相對於它的定位父級定位,脫離文檔流,四個位置有效
#4.fixed:固定定位,與絕對定位類別類似,也脫離了文檔流,元素在頁面上的位置固定,不隨頁面滾動,四個位置有效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.固定定位</title>
<style>
body {
/*将页面高度设置为2000px,使之出现垂直滚动条*/
height:2000px;
}
.box {
width: 200px;
height: 260px;
/*background-color: #6CF;*/
/*固定定位fixed:元素脱离文档流,相对于窗口定位,固定在页面上,并且不随页面滚动*/
/*可以当作是绝对定位的一个特例来看待*/
position:fixed;
top: 200px;
left:50px;
}
</style>
</head>
<body>
<!--<div></div>-->
<!--以在线QQ客服为例进行演示-->
<div><img src="/static/imghwm/default1.png" data-src="../images/qq.png" class="lazy" alt="" style="max-width:90%"></div>
</body>
</html>以上是css固定定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！
每周平台新聞：Galaxy Store的Web應用程序，Tappable Stories，CSS SubgridApr 14, 2025 am 11:20 AM在本週的綜述中：Firefox獲得了類似鎖匠的力量，三星的Galaxy Store開始支持Progressive Web Apps，CSS Subgrid正在Firefox發貨
每周平台新聞：Internet Explorer模式，搜索控制台中的速度報告，限制通知提示Apr 14, 2025 am 11:15 AM在本週的綜述中：Internet Explorer進入Edge，Google搜索控制台吹捧新的速度報告，而Firefox給出了Facebook＆＃039; s Notification
使用Gatsby組織和準備圖像以使圖像模糊效果的方法Apr 14, 2025 am 10:56 AM蓋茨比（Gatsby）進行了出色的處理和處理圖像。例如，它可以幫助您節省圖像優化的時間，因為您不必手動
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
Dreamweaver CS6
視覺化網頁開發工具
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
