position:relative 的深入理解,歡迎探討
對於css中的position:relative;我始終搞不明白它是什麼意思,有什麼作用?
對於position的其它幾個屬性,我都搞懂了
static : 無特殊定位,物件遵循HTML定位規則
absolute : 將物件從文件流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時物件不具有邊距,但仍有補白和邊框
relative : 物件不可層疊,但將依據left,right,top,bottom等屬性在正常文件流中偏移位置
fixed : IE5.5及NS6尚不支援此屬性
對於文件中所說的幾個屬性,除了relative,其它的一試,就效果出來了,對於個relative
要說是相對定位嘛,也不是。
對於頁面中一個static的div#demo,我想讓這個#demo裡的一個div#sub相對於#demo定位在右上角的某個地方,應該是用這個position:relative這個吧,然後再加上top,right給限制一下。
我理解得沒有錯吧?
不過在現實開發中,我卻常常 得不到預期的效果。我覺得應該是我對這個屬性還沒有理解透。現在我想完全掌握這個,就像position:absolute那樣地掌握它,想怎麼弄html元素就怎麼弄HTML元素。
請理解這一點的朋友們給講講,或者給點資料,連結之類 的也可以。
案例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>position</title> <style type="text/css"> <!-- body{ font-size:12px; margin:0 auto; } div#demo{ position:relative; border:1px solid #000; margin:50px; top:-50px; line-height:18px; overflow:hidden; clear:both; height:1%; } div#sub{ position:absolute; right:10px; top:10px; } div.relative{ position:relative; left:400px; top:-20px; } div.static,div.fixed,div.absolute,div.relative{ width:300px; } div.static{ background-color:#bbb; position:static; } div.fixed{ background-color:#ffc0cb; } div.absolute{ background-color:#b0c4de; } div.relative{ background-color:#ffe4e1; } --> </style> </head> <body> <div id="demo"> <div class="static">static: 預設值。無特殊定位,物件遵循HTML定位規則 </div> <div id="sub" class="absolute">absolute: 將物件從文件流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的一個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據body物件。而其層疊通過z-index屬性定義 </div> <div class="fixed">fixed:未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範 </div> <div class="relative">relative:物件不可層疊,但將依據 left,right,top,bottom 等屬性在正常文件流中偏移位置 </div> </div> </body> </html>
相關推薦
position:relative 的深入理解,歡迎探討
對於css中的position:relative;我始終搞不明白它是什麼意思,有什麼作用? 對於position的其它幾個屬性,我都搞懂了 引用 static : 無特殊定位,物件遵循HTML定位規則 absolute : 將物件從文件流中拖出,使用left,righ
對象的深度拓展$.extend(true,{},a,b),深入理解,小心陷阱
com ges 深入理解 沒有 裏的 事物 cnblogs wid 希望 轉載:https://www.cnblogs.com/DJeanWeb/p/4388689.html $.extend一般情景下,使用深度拓展兩個對象時,我們想要的效果是,b對象覆蓋掉a對象中存在的
$Django-setting.py配置 ,GET、POST深入理解,三件套,orm物件關係對映簡介
1 django中app的概念: 大學:----------------- 專案 資訊學院 ----------app01 物理學院-----------app02 ****強調***:建立的每一個app,都要在配置檔案中
hash函式 hashMap的深入理解,jdk8 hashMap加入紅黑樹演算法
一 hash表的介紹 非hash表的特點:關鍵字在表中的位置和它之間不存在一個確定的關係,查詢的過程為給定值一次和各個關鍵進行比較,查詢的效率取決於和給定值進行比較的次數。 雜湊表的特點:關鍵字在表中位置和它之間存在一種確定的關係 雜湊函式:翻譯為雜湊,就是把任意長度的輸入,通過雜湊
如何將量子鏈引入業務系統,使用JSON-RPC與錢包通訊(內附區塊鏈學習論,個人理解,歡迎交流)
提示 Tip1.本文適合想要深入瞭解區塊鏈技術的人員閱讀 Tip2.本文適合需要在業務系統中引入比特幣/量子鏈的技術人員閱讀 引言 入門區塊鏈技術之前,如果對於去中心化有一定了解,這無疑將幫助你更好的理解區塊鏈的底層技術;區塊鏈的底層技術由密碼學,共識演算法,
Auto Layout深入理解,及masonry簡介
本篇部落格是本人在學習自動佈局過程中對自動佈局的理解和整理,分三部分介紹,內容可能會有所重複,見諒。 一、autosizing與Auto Layout對比,及Auto Layout簡介 1、springs&struts簡介及問題 你肯定很熟悉autosi
小程式元件集合-(陸續更新中,歡迎探討~)
元件目前已基本完成: 文字跑馬燈 彈出層(常用於選擇商品屬性) 訂單好中差評價互動 左側可滑動tab 橫向滾動圖文 省市區三級聯動(單頁面(小程式的頁面層級限制)、多頁面兩種
z-index和position的深入理解-css
在網頁設計中,position屬性的使用是非常重要的。有時如果不能認識清楚這個屬性,將會給我們帶來很多意想不到的困難。並且css中的z-index屬性,簡單而又複雜;搞不懂裡面的原理,很難實現自己的功能。這次記錄下自己的查詢。 詳情見:深入理解css中的posi
PRODUCT_COPY_FILES的深入理解,為何不能在Android.mk使用
PRODUCT_COPY_FILES本質是和定義產品的AndroidProducts.mk(get-all-product-makefiles來獲取系統中所有AndroidProducts.mk 檔案路徑)聯絡在一起,這個檔案內部會定義所屬的產品的PRODUCT_MAKEFI
CSS深入理解學習筆記之relative
需要 定位 層疊 left 避免 str 作用 屬性 存在 1、relative和absolute的相煎關系 限制作用:①限制left/top/right/bottom定位;②限制z-index層級;③限制在overflow下的囂張氣焰。 relative和fixe
Python讀取excel表格時,意外的深入理解info字典問題
append hello clas 鍵值 print 商城 tables 包括 excel表格 import xlrd import re def excel_table_byindex(): data = xlrd.open_workbook(‘crawling
JavaScript 函數聲明,函數表達式,匿名函數的區別,深入理解立即執行函數(function(){…})()
之前 事件處理程序 logs cnblogs 函數調用 引擎 花括號 ava img function fnName(){xxxx}; // 函數聲明:使用function關鍵字聲明一個函數,在指定一個函數名。 //例如:(正常,因為 提升 了函數聲明,函
2.2 logistic回歸損失函數(非常重要,深入理解)
問題 好的 為知 得出 cnblogs 回歸算法 很多 將他 深入 上一節當中,為了能夠訓練logistic回歸模型的參數w和b,需要定義一個成本函數 使用logistic回歸訓練的成本函數 為了讓模型通過學習來調整參數,要給出一個含有m和訓練樣本的訓練集很自然的,希望通過
對find,xargs,grep和管道的一些深入理解
發送 文件名 rgs rom 輸入 很多 () option 理解 轉自於:http://fatmouse.xyz/2016/05/10/2016-05-10-find-grep-xargs-and-pipe/ 問題 相信大家都知道在目錄中搜索含有固定字符串文件的命令:
更好的理解position:relative的應用
單元 設置 .com 證明 去掉 註意 -1 src 實例 先記錄一下問題。在使用iview的表格進行左右兩列固定時,iview會自己在傳過去的高度上加上一個滾動條的高度,如果有出現橫向滾動條還好,但是如果沒有出現橫向滾動條就會這樣 如果項目中公用樣式文件還很巧的把ivi
理解CSS的position:relative
css position relative overlap 最近工作中做了幾件事情都與頁面元素定位相關,所以這裏將工作中遇到的問題以及解決方法記錄在博客裏,以便日後查閱。疊壓有一個任務是做一個列表組件,列表中的每一行都要向上疊壓上一行的底邊,註意,是疊壓,不是接壤。問題分析:利用相對定位(po
通過案例理解position:relative和position:absolute
font 混雜 head 指正 它的 nbsp 窗口 block round w3school過了HTML的知識之後,覺得要自己單純地去啃知識點有點枯燥,然後自己也很容易忘記,所以便找具體的網站練手便補上不懂的知識點。position:relative和postion
對阻塞,非阻塞,同步,異步的深入理解
一個 以太網 結果 情況下 spa nbsp emc sock 過程 以前寫過一篇對於這幾個概念的粗略解釋,現在再深入一些。 同步和異步的區別: 同步是調用協議中結果在調用完成時返回,調用過程中參與雙方處於一種狀態同步的過程。 異步是指調用方發出請求就立即返回。 請求甚至可
CSS外邊距屬性,深入理解margin
需要 AD result 左右 定位 IT 條件 表格 group margin <iframe height=‘265‘ scrolling=‘no‘ title=‘margin‘ src=‘//codepen.io/wmui/embed/zWEzEg/?heigh
深入理解並發/並行,阻塞/非阻塞,同步/異步【轉】
非阻塞 n) 做的 耗時 非阻塞socket 衣服 時間片輪轉 輪轉 理解 1、阻塞,非阻塞 首先,阻塞這個詞來自操作系統的線程/進程的狀態模型中,如下圖: 一個線程/進程經歷的5個狀態,創建,就緒,運行,阻塞,終止。各個狀態的轉換條件如上圖,其中有個阻塞狀態,就是