2. 程式人生 > >div佈局：相對定位、絕對定位、固定定位

div佈局：相對定位、絕對定位、固定定位

阿新 • • 發佈：2019-01-12
當用div佈局，相對定位時（一個div包含另一個div），子div的位置是相對於母div來設定的（從母div左上角開始算），margin可以活動到母div外圍而不會把母div撐大，padding則總是在母div內部折騰，會把母div撐大。—————————————————————————————————————————— 當用div佈局，絕對定位時，div位置是相對整個頁面來設定的（從整個網頁的左上角開始算），絕對定位的div被固定在了頁面某個距離的最上層，能遮住別的元素。當然這個頁面指的不是可視頁面，而是整個頁面，因為頁面內容一旦太多，拉動滾動條可以讓div在視線中消失（margin不會撐大，padding同樣會撐大）。
—————————————————————————————————————————— 當div用佈局，固定定位時，div的位置是相對於整個可視頁面來說的（從整個可視頁面的左上角開始算），它一直在可視頁面的某個位置的最上層，頁面再大，仍然霸屏在那裡。—————————————————————————————————————————— 最後我還是沒弄透徹padding與margin到底是怎麼回事，只知道前者是內邊框後者是外邊框。前者是div內部的內容相對於div左上角的距離，後者是div相對於頁面左上角的距離，所以內邊距一大就是div內部的內容距離div左上角的距離變大，所以padding會撐大而margin不會。最後還試了一下，當絕對定位的div與固定定位的div在同一位置時，哪個會被遮住，結果發現固定定位更吊一點，畢竟它佔據的是可視頁面嘛。
我寫這個的本意是為了讓學習css涉及到這一知識點的朋友能更好地理解div定位，可是我自己卻是個天生的糾結命，總喜歡不停地用程式碼做測試，然而不同的瀏覽器可能出現不同的效果，所以如果看到此文並有不同見解的朋友，你千萬不要來跟我爭論，真的，我會糾結死。 好了，再會！哈哈哈~~~~

相關推薦

div佈局：相對定位、絕對定位、固定定位

當用div佈局，相對定位時（一個div包含另一個div），子div的位置是相對於母div來設定的（從母div左上角開始算），margin可以活動到母div外圍而不會把母div撐大，padding則總是在母div內部折騰，會把母div撐大。——————————————————

相對（relative）定位和絕對（absolute）定位

首先，position的這兩個屬性一般是不使用的，因為有了浮動，所以我們才需要position屬性來實現我們想要的佈局。 1.相對定位（relative）：相對於原來位置（原來位置指在文件流中預設的位置，若加上了浮動時，那麼這個原來位置就是你設定浮動時的位置）的偏移，原來位置依然佔據空間。

Linux-相對路徑、絕對路徑、cd命令、創建和刪除目錄mkdir/rmdir、 rm命令

move 圖片 size 裏的 type cafe 例如 mdi 開始 絕對路徑：從根開始，為絕對路徑。從根下找能找到的命令為絕對路徑。相對路徑：相對當前所在位置的路徑。 pwd：當前所在目錄。 cd命令： cd - ： 回到上次所在目錄 例如：遙控器的交替鍵。cd

C\C++程式設計中：相對路徑與絕對路徑

在程式設計的過程中，會遇到需要引用外部檔案的情況，有兩種路徑的書寫方式，通過下面的列子進行分析。 電腦硬碟E盤下，建資料夾“test”，"test"下建立子資料夾“file”，"file"下建子資料夾“data”，電腦資源管理器顯示目錄 E:\test\fi

相對路徑、絕對路徑、部署路徑(html/css/servlet/jsp)

當在進行前後臺整合的時候，往往會出現路徑不統一或者路徑錯誤的情況，結果就是css無效、servlet或jsp頁面對映不到。 所以特意對路徑的設定寫一下總結: 這裡只涉及到 web應用的路徑問題， 至於本地系統的路徑不做討論。 1. 路勁可分為 絕對路徑 和 相對路徑 2. 絕對路徑 (開頭帶"

C\C++程式設計中：相對路徑和絕對路徑（借鑑學習）

電腦硬碟E盤下，建資料夾“test”，"test"下建立子資料夾“file”，"file"下建子資料夾“data”, 電腦資源管理器顯示目錄  E:\test\file\data 當前 路徑 E:\test\file =======================

CSS - 文件流 and 佈局（浮動、流式、定位、相對、絕對、固定）

目錄 一、文件流（normal flow） 1、概念 2、BFC（Block formatting context 塊格式化上下文）  - 2.1一切皆為框  - 2.2 無名塊框 3、BFC規則 二、浮動佈局 1

文件流 and 佈局（浮動、流式、定位、相對、絕對、固定）

目錄 1、概念 1、案例 一、文件流（normal flow） 1、概念   本質為normal flow（普通流、常規流）將窗體自上而下分成一行一行，塊級元素從上至下、行內元素在

Web前端面試指導(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?

web前端題目點評這道題目的提問比較多，連續問了三個問題，正常元素、絕對定位元素、互動元素如何居中，而且居中沒有說清楚是垂直居中還是水平居中，要回答清楚這個問題，必須得有深厚的功底，而且要分類的來回答，條理要清楚。可以先把水平居中各種情況說清楚，然後在把垂直居中說清楚。（一）元素水平居中的方式1）行級元素水平

CSS——相對定位、絕對定位、固定定位

部分 In detail pos 區分 並且 splay 們的 發現 相對定位： 當元素被設置相對定位或是絕對定位後，將自動產生層疊，他們的層疊級別自然的高於文本流，除非設置其z-index值為負值。 並且我們發現當相對定位元素進行位移後，表

WEB學習 -相對定位、絕對定位、固定定位、z-index

相對定位 相對定位，就是微調元素位置的。讓元素相對自己原來的位置，進行位置調整。 2、不脫標，老家留坑，形影分離 也就是說相對定位不脫標，真實位置是在老家，只不過影子出去了，可以到處飄。 3、相對定位用途 相對定位有坑，所以一般不用於做“壓

div中的相對定位與絕對定位

這一段時間打算完全用CSS的DIV編寫一個頁面，做了兩天思緒就有點亂了。 有的時候把某一個問題單獨抽出來看感覺很簡單。而複合起來就難的多,各種各樣的問題就來了。 程式中最討厭的就是找BUG了。思路前後銜接不上，捋不清頭緒，看的頭都大了。 家裡有兩個高手，不過卻很少問。就像我

h5的相對定位、絕對定位、固定定位以及案例練習

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #right,#left,#center

07 CSS-相對定位、絕對定位、固定定位、z-index

定位有三種，分別是相對定位、絕對定位、固定定位。 1、相對定位：position:relative; 2、絕對定位：position:absolute; 3、固定定位：position:fixed; 4、關於z-index

DIV CSS層內層的絕對和相對定位案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xm

詳解div+css相對定位和絕對定位用法

前言 在用CSS控制排版過程中，定位一直被人認為是一個難點，這主要是表現為很多網友在沒有深入理解清楚定位的原理時，排出來的雜亂網頁常讓他們不知所措，而另一邊一些高手則常常藉助定位的強大功能做出些很酷的效果來，比如CSS相簿等等，因此自己雜亂的網頁與高手完美的設計形成鮮明對

CSS佈局之脫離文件流詳解——浮動、絕對定位脫離文件流的區別

所謂脫離文件流，即將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當沒看到它，兩者位置重疊都是可以的。這裡，通過講解浮動脫離文件流（float）和絕對定位脫離文件流（position:absolute）的區別，讓大家對這一概念有更深的認識。 一、浮動

CSS盒子模型、絕對定位和相對定位

一、CSS盒子模型： 標準模式和混雜模式（IE）。在標準模式下瀏覽器按照規範呈現頁面；在混雜模式下，頁面以一種比較寬鬆的向後相容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。 盒子模型的邊框(border)就是圍繞著內容及補白的線，這條線你可以設定它

相對定位與絕對定位聯合使用

image 什麽 png col 內容 -c 位置 blog 定位在 使用相對定位可以很方便的原來的位置上，移動一下，但是又會占用原來的位置，後面的內容接不上來 。 有時候，希望一個元素在原來的位置上，移動一下，但是又不占用位置，這個時候，就需要絕對定位和相對定位組合使用了

css關於相對定位與絕對定位

css 1.一般如果我們不給元素設置position，則默認為static，此時是該元素是沒有定位的，像left/right這些偏移屬性都是沒有效果的。 2.position:relative （相對定位） 若設置為相對定位，即可配置left/right這些偏移，相對於該元素原有位置