CSS position固定定位用法揭秘

开发 前端
CSS中position属性有四个属性值,这里向大家描述一下CSS position固定定位的用法,如果让一个元素可能随着网页的滚动而不断改变自己的位置,通过CSS position固定定位可以很容易就实现。

本文向大家介绍一下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浏览器兼容问题概念解析
责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-09-15 14:56:18

CSSposition:fi

2010-09-10 13:07:51

CSS DIV绝对定位CSS DIV固定定位

2010-09-15 14:22:05

IE6position

2010-09-08 16:22:32

PositionCSS

2010-08-19 10:33:54

IE6position:fi

2010-09-06 11:11:31

CSS定位

2010-08-31 10:30:59

CSSpositionz-index

2010-08-24 13:34:11

CSSpadding

2010-09-15 13:44:01

CSS positio

2010-09-06 11:17:19

CSS相对定位CSS绝对定位

2010-08-25 13:54:29

CSStop

2010-09-01 11:21:18

CSSpositionfloat

2010-08-23 09:42:50

CSSPosition

2010-08-24 15:11:24

PositionCSS

2010-08-26 10:33:27

CSSborder

2010-09-15 13:50:04

CSSposition属性

2010-08-25 14:56:15

CSS相对定位

2010-09-15 14:30:07

CSS backgro

2010-09-06 17:20:04

background-CSS

2010-09-15 14:00:06

position属性DIV
点赞
收藏

51CTO技术栈公众号