搜尋
首頁web前端html教學CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位_html/css_WEB-ITnose

其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分。因此这里,小强老师和大家一起分享CSS定位的学习。

通过我们前面的学习,我们网页布局方法:

  1. 标准流   (最稳定)

  2. 浮动流   (float 其次)

  3. 定位流    ( 稳定性最后)

定位是完全脱离标准流的一种布局方式。

其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分。因此这里,小强老师和大家一起分享CSS定位的学习。

我们知道,定位都是和方位名词一起使用的,调整位置,大部分使用top,left,bottom,right配合使用的。

首先我们看看定位的分类:

1.绝对定位 absolute 

position:absolute;

绝对定位和相对定位用的相对来说,是比较多的地方。绝对定位到底有什么特点,在这里小强老师,给大家总结一下。

1.如果定位没有父盒子

      那么这个盒子,加上绝对定位后,都是以浏览器的左上角为原点,所有的移动,也是以该原点来移动的。

   案例如图:



预览后


  

2.如果有父盒子,但是父盒子,没有定位,那么,结果不会变,这个盒子还是会以浏览器的左上角为原点。



预览后

3.如果有父盒子,并且父盒子有定位,那么此时,绝对定位会以父盒子的左上角为原点,对齐。

如图:



生成效果:


  4. 绝对定位有个很重要的特点,就不占位置,完全脱离标准流,所以它会升起来,它的后侧会有标准流占据。

2.相对定位 (relative)

  position:relative
  
 相对定位简单,不管有没有父盒子,它都是以自身的左上角为原点。

  还有,它是占位置的,就是还有其他盒子,会排在的下方。


3. 固定定位

position:fixed

 固定定位也是相对于浏览器来说的,他是固定再浏览器的某个位置。 (ie6不支持固定定位,只能另外解决)

 固定定位,也不占位置,完全脱离标准流。

4. 静态定位

position:static

他几乎和标准流一样,没有特殊定位,并且是占位置的。

5.叠放次序:

z-index: 数值;
数值越大  盒子越靠上  需要注意:数值后面一定不能加单位.
.one{z-index:10;}
 
总结:

定位来说,占位置的有 static 静态定位和relative相对定位,不占位置的有 absolute绝对定位和fixed固定定位。这个很重要,对我们布局标准流,有很大的影响。
我们一定要记住的口诀就是,子级绝对,父级相对。 这样对我们布局来说,是最合适的布局理念。

 

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

如何正确理解PHP中的值传递方式如何正确理解PHP中的值传递方式Mar 08, 2024 pm 03:30 PM

如何正确理解PHP中的值传递方式PHP是一种广泛应用于Web开发的脚本语言,而在PHP中的参数传递方式主要有值传递和引用传递两种。而理解PHP中的值传递方式对于编写高效的代码至关重要。本文将详细讨论PHP中的值传递方式,并通过具体的代码示例来帮助读者更好地理解。值传递方式的基本概念值传递是指将变量的值复制一份传递给函数或方法,在函数内部对该值的操作不会影响到

css怎么去除a标签鼠标样式css怎么去除a标签鼠标样式Apr 20, 2022 am 11:07 AM

在css中,可用cursor属性去除a标签的鼠标样式,该属性用于定义鼠标指针在一个元素边界范围内所用的鼠标样式,属性值设置为none时,会去除元素的鼠标样式,设置为default时,显示默认箭头样式,语法为“a{cursor:none}”。

深入理解Linux管道的使用方法深入理解Linux管道的使用方法Feb 21, 2024 am 09:57 AM

深入理解Linux管道的使用方法在Linux操作系统中,管道是一种非常有用的功能,能够将一个命令的输出作为另一个命令的输入,从而方便地实现各种复杂的数据处理和操作。深入理解Linux管道的使用方法对于系统管理员和开发人员来说非常重要。本文将介绍管道的基本概念,并通过具体的代码示例来展示如何使用Linux管道进行数据处理和操作。1.管道的基本概念在Linux

聊聊如何用CSS box-shadow创建像素创意动画聊聊如何用CSS box-shadow创建像素创意动画Apr 20, 2022 am 10:17 AM

利用CSS也能创建像素创意动画!下面本篇文章给大家介绍一下用CSS box-shadow创建像素创意动画的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

深入理解Go语言文档中的strings.Split函数深入理解Go语言文档中的strings.Split函数Nov 04, 2023 pm 01:14 PM

深入理解Go语言文档中的strings.Split函数,需要具体代码示例在Go语言中,字符串操作是非常常见的需求。其中,strings包是Go语言提供的一个标准包,提供了丰富的字符串处理函数。其中,strings.Split函数是其中一个常用的函数,它的作用是根据指定的分隔符将一个字符串拆分成一个字符串切片。在正式深入探讨strings.Split函数之前,

手把手带你使用CSS绘制一个可爱卡通狮子动画手把手带你使用CSS绘制一个可爱卡通狮子动画Apr 22, 2022 am 10:47 AM

怎么利用CSS绘制狮子动画?下面本篇文章手把手带大家一步步利用CSS绘制一个可爱卡通狮子动画,希望对大家有所帮助。

深入理解MySQL中的布尔类型深入理解MySQL中的布尔类型Mar 15, 2024 pm 05:30 PM

MySQL中的布尔类型是一种非常实用的数据类型,它用于存储逻辑值,只能取两种值:TRUE或FALSE。在MySQL中,布尔类型也被称为BOOL或BOOLEAN,可以用TINYINT(1)来表示。在本文中,我们将深入探讨MySQL中布尔类型的定义、用法以及具体的代码示例。首先,让我们来看一下在MySQL中如何定义一个布尔类型的列:CREATETABLEus

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境