css中的position(定位)

来源:http://www.cnblogs.com/elementzhao/archive/2017/06/25/7076834.html
-Advertisement-
Play Games

一、position語法與結構 position語法: position : static absolute relative position參數:static : 無特殊定位,對象遵循HTML定位規則absolute : 將對象從文檔流中拖出,使用left,right,top,bottom等屬性 ...


一、position語法與結構

position語法: position : static absolute relative 

position參數:
static :  無特殊定位,對象遵循HTML定位規則
absolute :  將對象從文檔流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過css z-index屬性定義。此時對象不具有邊距,但仍有補白和邊框
relative :  對象不可層疊,但將依據left,right,top,bottom等屬性在正常文檔流中偏移位置

二、絕對定位使用條件

position:absoluteposition:relative絕對定位使用通常是父級定義position:relative定位,子級定義position:absolute絕對定位屬性,並且子級使用left或right和top或bottom進行絕對定位。

三、css絕對定位總結

絕對定位如果父級不使用position:relative,而直接使用position:absolute絕對定位,這個時候將會以body標簽為父級,使用position:absolute定義對象無論位於DIV多少層結構,都將會被拖出以<body>為父級(參考級)進行絕對定位。

在絕對定位時候我們可以使用css z-index定義css層重疊順序。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一 List映射 如果持久化類中具有List對象,可以通過映射文件中的類<list>元素或註解來映射List. 例如,一個問題有多個答案: 1)創建持久化類 2)創建映射文件 3)在全局配置文件中增加 4)測試 二 List一對多映射 一個問題有多個答案,每個答案有自己的信息,需要使用一對多關聯來映 ...
  • 1、對於C/C++的文件,文件頭應該有類似這樣的註釋: /************************************************************************ * * 文 件 名:network.c * * 文件描述:網路通訊函數集 * * 創 建 人:H ...
  • 準備篇 適用/適合人群:適合基礎小白 目標:掌握JavaSE。 ●技術點小節: 1.開發工具的安裝配置的介紹 2.JDK安裝 3.DOS環境編程 4.Eclipse的安裝使用 ●JAVA基礎 1.基本的語法規範 2.數據類型 3.流程式控制制 4.函數 ●初識JavaOOP 1.類,對象,面向編程思想 ...
  • 本人從事前端開發的工作,由於一直以來都沒有寫文章的習慣,很多東西不記下來就很容易忘記。如果可以親手把記下來的內容通過自己理解然後寫下來,那將會對所學的知識內容得到更深刻的印象和理解,將會對以後的工作更有幫助。 希望大家可以多多支持^_^ ...
  • 簡介 基於 webpack2 實現的多入口項目腳手架,主要使用 extract text webpack plugin 實現 js 、css 公共代碼提取,html webpack plugin 實現 html 多入口,less loader 實現 less 編譯,postcss loader 配置 ...
  • Web 前端代碼規範 最後更新時間:2017-06-25 原始文章鏈接:https://github.com/bxm0927/web-code-standards 此項目用於記錄規範的、高可維護性的前端代碼,這是通過分析 Github 眾多前端代碼庫,總結出來的前端代碼書寫規範。 目錄 前端普適性規 ...
  • 介紹: markdown是一種可以使用普通文本編譯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本具有一定的格式。說的簡單一點,markdown其實就是一種簡單的文本,與普通的文本文件(txt文件)不同的是,支持一些特殊的符號,通過特殊的符號來表示不同的語義,並且給予不同的樣式。普通的文本文件 ...
  • javascript的數據類型 (symbol)一、原始數據類型 或 基本數據類型 6種 1,undefined (1,申明未賦值,2,函數沒有返回值)2,null (空,不存在)3,number (數字,小數和整數)4,boolean (布爾值,true,false) 5,string (字元串, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...