1. 程式人生 > >css position兩個屬性值absolute和fixed的區別

css position兩個屬性值absolute和fixed的區別

作為一名css界的小朋友一直沒系統的瞭解過position屬性,今天用到了就詳細的記錄下吧!

fixed
固定定位,參照位置是瀏覽器視窗的左上角,即座標點為(0px, 0px)

absolute
絕對定位,參展位置是離當前元素最近的定位方式為fixed,absolute,relative的祖先原則的左上角。

因此,fixed主要用於固定網頁的頭部尾部和廣告區域隨螢幕滾動。
absolute主要用於多個div層之間的決定定位。
舉個例子吧:
<div style="posistion:relative" id="p1">
<div style="posistion:fixed"
id="p2"> <div style="position:static" id="p3"> <h2 style="postion:absolute;left:10px;top:10px">我的參照座標是id=p2</h2> </div> </div> </div>

相關推薦

css position屬性absolutefixed區別

作為一名css界的小朋友一直沒系統的瞭解過position屬性,今天用到了就詳細的記錄下吧! fixed 固定定位,參照位置是瀏覽器視窗的左上角,即座標點為(0px, 0px) absolute 絕

在QT5中實現求輸入並輸出

求和 數據類型 編寫 cnblogs 運行 代碼 .com int logs 1、在UI設計界面放置兩個輸入lineEdit、一個輸出TextBrowser和一個PushButton(用以按鍵求和),如圖 2、打開.h文件,在類裏面添加槽函數的聲明代碼,如圖 ; 3、打開

timestamp的屬性:CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP

當前系統時間 tro 則無 ron 如果 time ren ins 使用情況 timestamp有兩個屬性,分別是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP兩種,使用情況分別如下: 1.CURRENT_TIMEST

JUnit4:Test註解的屬性:expectedtimeout

JUnit4:Test文件中的解釋:   The Test annotation supports two optional parameters.   The first, expected, declares that a test method should throw an exception.

CSS核心概念——層疊繼承

rom 核心概念 clas 兩個 屬性 同時 加載 字體 繼承 1、繼承: 是指應用在某個標簽/元素上的CSS屬性傳遞給了內部嵌套的標簽。 通常來說文本類的會被繼承(字體、字號、顏色) chrome裏面是灰色的表示沒有繼承 2、 1-1繼承 1- 2一個標簽可能有一個或多個

Java集合框架上機練習題:編寫一個Book類,該類至少有nameprice屬性。該類要實現Comparable接口,在接口的compareTo()方法.....

ext .cn 數據庫 識別 方法 屬性 set package compareto 編寫一個Book類,該類至少有name和price兩個屬性。該類要實現Comparable接口,在接口的compareTo()方法中規定兩個Book類實例的大小關系為二者的price屬性的

position的四屬性

Position屬性四個值:static、fixed、absolute和relative的區別和用法   在用CSS+DIV進行佈局的時候,一直對position的四個屬性值relative,absolute,static,fixed分的不是很清楚,以致經常會出現讓人很鬱悶的結果。今天研究了一下

css position: inherit、static、relative、absolutefixed

inherit: 規定應該從父元素繼承 position 屬性的值。 static: 預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告,z-index只對absolute、fixed有效,預設為0)。

BFCCSSBUG 20181223

兩個經典的BUG margin塌陷問題 當為一對普通流中的父子盒子中的子盒子設定margin-top時,如果父盒沒有設定一個border-top,且雙方的margin-top都為正的時候,那麼就會存在有一個高度塌陷的問題。 具體的表現是父盒和子盒共享margin-top,如果他們同時具有margin-to

CSS中,class類之間有空格沒空格的區別是什麼?

CSS中定義CLASS時,中間有空格和沒空格的區別是什麼? .example .pp{ color: orange; } .example.pp2 { color: green; } 如上面的兩個定義一個是中間有空格,一個是中間沒空格。 第一個

DIV中position的5屬性

position有5種屬性值:static, relative, absolute, fixed, inherit 一、預設定位static: position的預設值,一般不設定position屬性時,會按照正常的文件流進行排列。 二、相對定位relat

html5標籤為什麼會有marginpadding屬性

   個人理解,html5中的每一標籤就是一個控制元件,每一個控制元件都有自己的大小,如果我們不進行設定其大小,那麼控制元件就會使用預設值。    假設說我現在有一個<input>控制元件,type型別為button,這個button控制元件會在螢幕上佔據一定的

關於jQuery物件的屬性selectorcontext

Context引數需要是一個正常工作的節點物件(DOM物件,而不jQuery物件)。雖然傳遞jQuery物件也可以起到限定查詢範圍的作用,但是這樣的話,那麼jQuery物件的context屬性就會變成整個Document物件。如果您看完了DEMO,有一些不同的看法的話,請儘

c++ 找陣列中元素,其等於固定sum,並輸出

週二去中興面試的,筆試題做的是選擇填空,加一道程式設計題。 程式設計題求得是陣列中兩個元素,求和等於固定值sum。 這題最簡單的方法當然是採用雙重迴圈,進行遍歷。但是這種方法的效率無疑是比較低的。複雜度是O(n^2)。 所以我就從另外一個角度進行分析:1. 先對陣列進行排序

介紹下Python的標準庫 os sys

保存 目錄 ges 兩個 。。 popen 後退 new int import sysprint(sys.path) #python 2 中報錯 。。。。,打印的是絕對路徑(***\\python\\lib\\site-packages# 第三方庫,後退一級為標準庫)‘‘

CSS入門—核心概念

權重 body class colspan cells 發生 val align imp 一、繼承: 1、指應用在某個標簽上的CSS屬性傳遞給了內部嵌套的標簽; 2、通常文本類的會被繼承:字體、字號、顏色; 二、層疊: 類型 內嵌 i

MongoDB-Java的基本操作UpsertinsertMany

slist 出現 兩個 我想 option ceo logs 方法 lis   此文只是為了記錄幾個基本操作,首先Upsert,有多種方法可以進行,但是都需要指定UpdateOptions.upsert(true),其中最簡單的辦法如下(eqq是一個用來filter的BSO

C語言編程的工具:valgrindcore

mit 編程 崩潰 文件 gdb 程序 程序崩潰 檢查內存泄漏 ted 檢查內存泄漏: valgrind --leak-check=full ./ecox_rws_helper 來檢查內存泄漏 程序崩潰看錯誤: ulimit -c unlimited 然後執行程序,會在

找出能被給定參數它們之間的連續數字整除的最小公倍數。 範圍是數字構成的數組,數字不一定按數字順序排序。

數字 g++ res tle 等於 param span 最小公倍數 推薦 function smallestCommons(arr) { arr = arr.sort(); //從小到大排序 var result ; //結果 var judge = false;

一條SQL查詢一個屬性,多屬性的情況

cat sele 屬性 clas family 獲取 sql 查詢 group 原先sql獲取角色對應的權限信息: select a.*, group_concat(b.auth_name) as auth_name from sh_role a left join sh_