如何使用css固定位置-css教學-PHP中文網

首頁

web前端

css教學

如何使用css固定位置

墨辰丷

May 09, 2018 pm 05:37 PM

css位置

本篇文章主要介紹如何使用css固定位置，非常不錯，可以方便提示用戶等信息，有感興趣的小伙伴了解一下。

程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>层固定位置练习--by 阿会楠</title> 
<style type="text/css"> 
html,body{ 
    overflow:hidden; 
    padding:0; 
    margin:0; 
    width:100%; 
    height:100%; 
} 
#_body{ 
    height:100%; 
    overflow-y:scroll; 
    width:100%; 
    height:100%; 
} 
#adDiv{ 
    position:absolute; 
    z-index:99999; 
    bottom:10px; 
    left:10px; 
    width:200px; 
    height:30px; 
    border:1px solid #8A9ABB; 
    background:#F0F4F7; 
    font:12px tahoma; 
    text-align:center; 
    line-height:30px; 
} 
</style> 
</head> 

<body> 
<div id="adDiv"><a href="http://www.jb51.net/">脚本之家</a></div> 
<div id="_body"> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
</div> 
</body> 
</html>

相關推薦：

vue監聽捲動事件某元素吸頂或固定位置顯示詳解

CSS DIV固定位置,不隨捲軸而捲動_html/css_WEB-ITnose

隨頁面捲動顯示/隱藏窗口固定位置元素_html/css_WEB-ITnose

如何在頁面下固定位置顯示資料庫的值

以上是如何使用css固定位置的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

這麼多顏色鏈接Apr 13, 2025 am 11:36 AM

最近有一系列有關顏色的工具，文章和資源。請允許我通過將它們四捨五之後關閉幾個標籤，以供您享受。

自動利潤在Flexbox中的工作方式Apr 13, 2025 am 11:35 AM

羅賓以前已經介紹過這一點，但是我在過去的幾周里聽到了一些關於它的困惑，看到另一個人在解釋它，我想

移動彩虹Apr 13, 2025 am 11:27 AM

我絕對喜歡三明治網站的設計。在許多美麗的功能中，這些標題是滾動時帶有彩虹的下線。它不是

新年，新工作？讓我們做一個網格驅動的簡歷！Apr 13, 2025 am 11:26 AM

許多流行的簡歷設計通過以網格形狀鋪設部分來充分利用可用的頁面空間。讓我們使用CSS網格創建一個佈局

將用戶擺脫過多習慣的一種方法Apr 13, 2025 am 11:25 AM

頁面重新加載是一回事。有時，當我們認為它沒有響應或認為新內容可用時，我們會刷新頁面。有時我們只是生氣

域驅動的設計與ReactApr 13, 2025 am 11:22 AM

關於如何在React世界中組織前端應用的指導很少。（只需移動文件，直到“感覺正確”，大聲笑）。真相

檢測非活動用戶Apr 13, 2025 am 11:08 AM

大多數情況下，您並不真正在乎用戶是否積極參與或暫時非活動。不活躍，意思，也許他們

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo一直在集成方面非常出色。他們與特定應用程序（例如廣告系列顯示器，MailChimp和Typekit）進行集成，但他們也

See all articles

熱AI工具

熱工具

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中