CSS定位(positive)屬性的原理
static
預設值,元素出現在正常的流中。預設值,所以沒什麼好說的。
relative
通過設定水平距離(left/right)或垂直距離(top/bottom),讓這個元素相對於它的起點移動。元素仍然佔據原來的空間。所以當div2偏移100px時,div1,3都保持在原來的位置。
.div2 {
width: 100px;
height: 100px;
position: relative;
top: 20px;
left: 20px;
}
absolute
絕對定位使元素的位置與文件流無關,因此不佔據空間
因為絕對定位的框與文件流無關,所以它們可以覆蓋頁面上的其他元素,這樣就出現了一個層次的問題,我們可以通過z-index屬性來控制這些框的堆放次序。z-index的值越高,框在堆中的位置就越高。
原始狀態:
.div2 {
width: 100px;
height: 100px;
background-color: yellow;
position : absolute;
top: 20px;
left: 20px;
}
設定div2絕對定位:
.div2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 20px;
left: 20px;
}
看到div3佔據了原來div2的位置,因此說明div2設定了絕對定位之後,脫離了普通文件流。並且是相對於瀏覽器偏移的。
最外層div0設定相對定位:
.div0 {
position: relative;
}
顯然,現在div2相對於div0進行偏移。
那再試試把div0改成absolute?發現結果還是一樣。
fixed
固定定位的元素,通常相對於瀏覽器視窗或frame進行定位。詳情請參見視窗小廣告。
不管你在哪,廣告總在那。
相關推薦
CSS定位(positive)屬性的原理
static 預設值,元素出現在正常的流中。預設值,所以沒什麼好說的。 relative 通過設定水平距離(left/right)或垂直距離(top/bottom),讓這個元素相對於它的起點移動。元素仍然佔據原來的空間。所以當div2偏移100px
前端知識小結-CSS定位(position)的分類及用法
在複習的過程中總結了一些知識點,在以後會陸續分享給大家,有不對的地方也請大家指正!!! CSS定位分類及用法 1.預設定位 position:static 在不寫的情況下預設為預設定位 2.絕對定位 position:absoluted 相對於最近的父元素定位
CSS定位(position屬性)以及top和magin-top的區別
CSS 定位 (Positioning) 屬性允許我們對元素進行定位。 CSS 定位和浮動:CSS 為定位和浮動提供了一些屬性,利用這些屬性,可以建立列式佈局,將佈局的一部分與另一部分重疊,還可以完成多年來通常需要使用多個表格才能完成的任務。 定位的基本思想很簡單,它允許我
CSS定位以及z-index屬性(層疊性)的詳解
定位 定位方向:top left right bottom就這四個位置 一、靜態定位 position:static; 靜態定位就是文件流,沒有別的意思,不需要寫 二、絕對定位 (脫標) position:absolute;
CSS 各種定位(position)方式的區別
spa html posit 空間 不顯示 保留 clas 絕對定位 不可見 static:靜態定位是position的默認值,元素框正常生成,也就是沒有定位時的正常顯示。 relative:相對定位 用法一:元素相對自身的原位置偏移某個距離,但是原本
UI自動化測試(二)瀏覽器操作及對元素的定位方法(xpath定位和css定位詳解)
cli 刷新 ota api enter 版本 ror apache 窗口 Selenium下的Webdriver工具支持FireFox(geckodriver)、 IE(InternetExplorerDriver)、Chrome(ChromeDriver)、 Opera
HTML學習筆記 css定位(靜態,相對,固定,絕對布局)偏移案例 第十二節 (原創) 參考使用表
absolute write style 用戶 學習 nbsp -c code posit <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
css中文字(text)和字型(font)屬性
文字屬性 1、text-decoration屬性表示文字的修飾 none:取消裝飾 underline :下劃線,與標籤、效果相同 overline :上劃線 line-through :貫穿線(刪除線),與標籤、效果相同 blink :閃爍(因相容性問題很少使用)
CSS樣式(四)- CSS定位
CSS樣式 - CSS定位 css定位(Positioning)屬性 允許定義元素框相對於其正常位置應該改出現的位置,或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。 一切皆為框 <1>塊級元素:div、h1或p標籤 即:顯示為一塊內容稱之為 “塊框“
CSS定位(慕課網學習筆記)
定位模型 static自然模型 relative相對定位模型 absolute絕對定位模型 fixed固定定位模型 sticky磁鐵定位模型 possition之static(預設的設定)(靜態定位、常規定位、自然定位) 作用 使元素
CSS變數(自定義屬性)實踐指南
本文翻譯自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 Sass和Less這樣的前處理器,讓我們的C
CSS屬性之文字(Text)屬性 常用14個
color屬性 color屬性設定文字字型顏色。 顏色值有三種寫法: 直接寫顏色名,如:red十六進位制,如:#d2d2d2rgb顏色,如:rgb(255,0,255),注:數值最大為255,最
Html CSS學習(五)position定位 原
Html CSS學習(五)position定位 position用來對元素進行定位,其值有以下幾種: static:無特殊定位,物件遵循正常文件流,top,right,bottom,left等屬性不會被應用。 relative:物件遵循正常文件流,但將依據top,right,bottom
CSS屬性之過渡(transition)屬性
定義 過渡transition是個複合屬性,它包括了transition-property、transition-duration、transition-timing-function、transit
CSS學習(五)——區塊、浮動、定位、溢位、滾動條
區塊 佔據一整行的標記叫做區塊。例如: <p>...</p> <div>...</div> 只要是區塊,可以使用如下屬性名稱: 屬性名稱 設定值 說明 width 畫素/百分比 區塊的寬度 height 畫素/百分比 區塊的高
CSS浮動與定位(二)
定位 通過使用position屬性,可以選擇4種不同型別的定位:static,absolute,fixed,relative。預設值即static。主要介紹absolute以及relative值的特性,fixed與absolute類似,只是它的包含塊預設為瀏覽
CSS設計美麗之絕對定位(absolute)的使用(小作品)
關於HTML與CSS的小作品之一: 前端已經學習過絕對定位的概念了: 絕對定位:脫離文件流,以 離自己最近定位的祖先元素(position) 為參照物,如果沒有定位的祖先元素,則追溯到以body為參照物,通過四個偏移屬性進行偏移,不會影響文件中的元素,其margin不會與
CSS學習(三)—相對定位與絕對定位
.net 占用 說明 技術 自身 clear 位置 link 例如 版權聲明:本文為博主原創文章,未經博主同意不得轉載。 https://blog.csdn.net/gxq74171861
醫脈神劍之正電子發射計算機斷層掃描成像(PET)基礎原理(轉)
span nor item wrap ott head 計算機 raw font 偶們只看圖,不說話 ... ... 醫脈神劍之正電子發射計算機斷層掃描成像(PET)基礎原理(轉)
Android 編輯框(EditText)屬性學習
藍色 區域 password border limit 文字 all 動作 方式 EditText繼承關系:View-->TextView-->EditText EditText的屬性非常多,這裏介紹幾個: android:hint=&qu