web前端技术讲解之CSS中position的定位技术

web前端技术讲解之CSS中position的定位技术

使用position定位有四种方式,分别为absolute、relative、static、fixed,static是静态定位,也为系统自动定位。下面主要分析其他三种定位方式的特点。

2363af2b-0d83-402b-8ce9-bba579fad1f1

 

 

 

1. 绝对定位:position:absolute

(1) 绝对定位是将元素依据已经定位(绝对、固定或相对定位)的离他最近的祖先元素进行定位,祖先元素没有定位或没有祖先元素则默认依据body浏览器窗口定位。

(2) 绝对定位的元素不论本身是什么类型,定位后都将成为一个新的块级元素,如果未指定宽高度默认自适应实际包含的内容区域(不在默认浏览器宽度)。

(3) 绝对定位后的元素将处于赋予其他元素之上,自身不占位置,他原来在正常文档流中所占的空间同时被关闭,就是说绝对定位的元素不占据页面空间,原空间被后续元素使用。

绝对定位必须用left、right、top、bottom属性之一激活,用于指定元素左、右、上、下外边距距离已定位祖先元素(或浏览器)左、右、上、下内边框的距离。

如果定义多个属性,当left、right、冲突时以left为准,当top、bottom冲突时以top为准,如果一个也不指定则元素扔按普通文档流布局,但他自己不再占据空间,后续元素上移与其重叠。

绝对定位元素定位后相对祖先元素的位置不在变化,若页面内容较多拖动页面滚动时,定位元素会随页面一起滚动。

绝对定位元素重叠覆盖其他元素时可用z-index属性设置他们的叠放次序。

3095b393-400c-4ebf-a3ea-3bbd58d2fb52

 

 

 

2. 相对定位:position:relative

(1) 相对定位是让元素(可以是行内元素)相对于它在正常文档流原位置按left、right、top、和bottom偏移量移动到新位置。

(2) 相对定位的元素移动后保持原外观样式大小,移动定位后不会占据新空间会覆盖新位置原有元素,原位置空间被保留,其他元素相对他原来的位置不变。

(3) Left、right、top、和bottom指定相对原位置移动的偏移量,可以使用带单位数值、相对父元素的百分比%。

Left正值:左边向内—向右移动,负值:左边向外—向左。

right正值:右边向内—向左移动,负值:右边向外—向右。

top正值:上边向内—向下移动,负值:上边向外—向上。

bottom正值:下边向内—向上移动,负值:下边向外—向下。

3. 固定定位:position:fixed

固定定位与绝对定位absolute相似,定位后元素也生成为新块级盒框、覆盖新位置原有元素,在正常文档流中所占的原空间关闭被后续元素使用。

adbf71fb-21cf-4d12-b7e3-48c102e8e295

 

 

 

固定定位与绝对定位absolute的区别是定位的元素无论父元素是否定位都会直接在浏览器窗口中定位,不会随滚动条拖动页面而滚动,固定定位用left、right、top、bottom指定浏览器左、右、上、下各边向中心的偏移量作为定位元素外边距位置

总结:元素的定位模型中需要区分每个属性值的不同定位方式,分为绝对定位、相对定位、固定定位以及默认定位和继承父元素。其中绝对定位和固定定位都脱离原本的文档流,而相对定位则遵循原本的文档流。设置元素的定位方式后,还需要指定偏移量。可以从上、右、下、左四个方向进行偏移。并且可以利用Z-index属性设置元素之间的层叠顺序。

转载于:https://my.oschina.net/u/4046848/blog/2999848

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101185.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • keil(MDK) 5官方下载教程

    keil(MDK) 5官方下载教程一、KEILKeil公司是一家业界领先的微控制器(MCU)软件开发工具的独立供应商。Keil公司由两家私人公司联合运营,分别是德国慕尼黑的KeilElektronikGmbH和美国德克萨斯的KeilSoftwareInc。Keil公司制造和销售种类广泛的开发工具,包括ANSIC编译器、宏汇编程序、调试器、连接器、库管理器、固件和实时操作系统核心(real-timekernel)。有…

  • swagger根据注解屏蔽大量不需要的接口

    swagger根据注解屏蔽大量不需要的接口

  • 大数据管理与应用专业总结笔记

    大数据管理与应用专业总结笔记大数据管理与应用专业:数据科学教育特点:不仅依赖于传统的信息管理于信息系统专业,更依赖于计算机、数学、统计等学科。大数据专业十一门涉及广泛的交叉性的学科。大数据时代的下的理念(维克托·迈尔·舍恩伯格):一是更相关性而不是因果性;二是更关注数据的纷繁复杂,而不是数据的精准;三是全部数据,而不是抽样数据。维克托·迈尔·舍恩伯格:维克托·迈尔-舍恩伯格是十余年潜心研究数据科学的技术权威,是最早洞见大数据时代发展趋势的数据科学家之一,也是最受人尊敬的权威发言人之一。**目前的形势:**目前国内新增院校还不多

  • 使用instsrv和srvany注册windows系统服务

    使用instsrv和srvany注册windows系统服务1、下载配置instsrv和srvany下载地址:https://dl.pconline.com.cn/download/558946.html根据电脑属性复制文件:32位操作系统:将两个文件放入C:\Windows\System32文件夹下即可64位操作系统:除放入System32文件夹下,还需放入C:\Windows\SysWOW64文件夹下2、jar包和bat运行文件在同一目录下3、追加服务win+r打开运行窗口、输入cmd进入DOS窗口执行命令:instsrvr

  • c++语言入门教程–15字符串常见操作

    c++语言入门教程–15字符串常见操作

  • 协议和协定有什么区别_协议和合同是一回事吗

    协议和协定有什么区别_协议和合同是一回事吗1、https协议需要到CA(CertificateAuthority,证书颁发机构)申请证书,一般免费证书较少,因而需要一定费用。(原来网易官网是http,而网易邮箱是https。)2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。4、http的连接很简单,是无状态的。Https协议是由SSL+Http协议构建的可进行加密传输、身份认证的网络协议,比http.

    2022年10月11日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号