CSS position固定定位用法揭秘
创始人
2024-07-14 02:20:17
0

本文向大家介绍一下CSS position固定定位的概念和用法,首先看一下CSS定位的定义,在CSS中关于定位的内容是:position:relative|absolute|static|fixed ,每个属性值都有各自的特点和作用。

CSS position固定定位用法揭秘

CSS定位的定义:  

在CSS中关于定位的内容是:position:relative|absolute|static|fixed  

◆static没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。  

◆relative不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可以通过z-index进行层次分级。  

◆absolute脱离文档流,通过top,bottom,left,right定位。选取其最近的父级定位元素,当父级position为static时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。  

◆fixed固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。  

CSS中定位的层叠分级:

z-index:auto|namber;  

◆auto遵从其父对象的定位  

◆namber无单位的整数值。可为负数

CSS position固定定位

由于广告的滥用,使得一些浏览器软件都开始有了广告内容拦截,使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed;他的含义就是:CSS position固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。

【编辑推荐】

  1. 解决IE6 position:fixed 固定定位问题
  2. CSS中三大position属性值用法解读
  3. 深入探究DIV CSS布局中position属性用法
  4. CSS属性display:inline-block使用揭秘
  5. Firefox、IE7、IE6浏览器兼容问题概念解析

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...