關於定位的一些事。

2021-08-22 10:37:04 字數 1648 閱讀 3577

當在這乙個頁面上想要實現布局打破固有的自上向下的文件流排版。就需要脫離出文件流,從而移動布局排版。

今天在這裡對於定位有一點想法,和記錄了一些很是有用的內容。

首先,css定位是基於盒子模型的,可分為

靜態static定位

絕對absolute定位

相對relative 定位

固定fixed定位。

其中,平時所用最多的是:絕對定位和相對定位。

1、絕對定位:

position:absolute

使用left、right、top、bottom等屬性相對於其最接近的乙個最有定位設定的父級元素進行絕對定位,如果元素的父級沒有設定定位屬性,則依據 body 元素左上角作為參考進行定位。絕對定位元素可層疊,層疊順序可通過 z-index 屬性控制,z-index值為無單位的整數,大的在上面,可以有負值。(目前所了解,absolute是最近父級的相對定位relative來的,即 父相子絕。若父級無relative,則如上所同,就body元素左上角作為參考進行定位)

絕對定位的定位方法:如果它的父元素設定了除static之外的定位,比如position:relative或position:absolute及position:fixed,那麼它就會相對於它的父元素來定位,位置通過left , top ,right ,bottom屬性來規定,如果它的父元素沒有設定定位,那麼就得看它父元素的父元素是否有設定定位,如果還是沒有就繼續向更高層的祖先元素類推,總之它的定位就是相對於設定了除static定位之外的定位的第乙個祖先元素,如果所有的祖先元素都沒有以上三種定位中的其中一種定位,那麼它就會相對於文件body來定位(並非相對於瀏覽器視窗,相對於視窗定位的是fixed)。

2、相對定位(relative):

position:relative

相對定位元素不可層疊,依據left、right、top、bottom等屬性在正常文件流中偏移自身位置。同樣可以用z-index分層設計。

3、固定定位(fixed)

position:fixed

固定定位與絕對定位類似,但它是相對於瀏覽器視窗定位,並且不會隨著滾動條進行滾動。

固定定位的最常見的一種用途是在頁面中建立乙個固定頭部、固定腳部或者固定側邊欄,不需使用margin、border、padding。

4、 靜態定位

position:static

他幾乎和標準流一樣,沒有特殊定位,並且是佔位置的。

絕對定位vs相對定位

絕對定位好像把不同元素安排到了一棟樓的不同樓層(除首層,文字流放在首層),它們之間互不影響;相對定位元素在首層,與文字流一起存放,它們之間互相影響。

被設定了絕對定位的元素,在文件流中是不佔據空間的,如果某元素設定了絕對定位,那麼它在文件流中的位置會被刪除,它浮了起來,其實設定了相對定位也會讓元素浮起來,但它們的不同點在於,相對定位不會刪除它本身在文件流中佔據的空間,其他元素不可以佔據該空間,而絕對定位則會刪除掉該元素在文件流中的位置,使其完全從文件流中抽了出來,其他元素可以佔據其空間,可以通過z-index來設定它們的堆疊順序 。

定位來說,佔位置的有 static 靜態定位和relative相對定位,不佔位置的有 absolute絕對定位和fixed固定定位。這個很重要,對我們布局標準流,有很大的影響。

我們一定要記住的口訣就是,子級絕對,父級相對。 這樣對我們布局來說,是最合適的布局理念。

關於const的一些事

一 const能做哪些事情呢?1 可以定義const常量 2 可以修飾函式的形參和返回值 3 可以修飾函式的定義體 意義 被const修飾的東西都要受到強制的保護,可以預防意外的變動,能提高程式的健壯性 二 const和 define有啥不同的呢?我們知道const定義的是常量,define也可以定...

關於linphone,arm的一些事

移植好linphone之後就先用linphonec除錯,看下有什麼錯誤資訊。這個鏈結事是關於inphonec命令的 好像翻00牆才能進哦,我現在不能翻牆,昨晚開啟的 太多,這個 是否是我說的那個其實也不是很確定,總之你進去就知道了2333 之前進了乙個q群,蠻不錯的,不過記得裡面的命令大全也是不全的...

關於面試的一些事

2015年7月13日 知識點 鍊錶,malloc與free,socket,多工 這次面試安排的是下午1 30,我到了之後首先讓我做了乙份筆試題,一共三道知識題 一道思維題,先把這幾套題目大概說一下 1.有n個人,每個人有乙個id,從1到n對應的id為 1號,2號,3號,n號。讓他們從1開始報數,報到...