`

position属性详解

    博客分类:
  • Web
阅读更多

 position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 
属性说明: 
1 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 

2 fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 

3 relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 

4 static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 
5 inherit 规定应该从父元素继承 position 属性的值。(ie中未支持此属性) 

所有空间position的默认值为static,所以需要将其设置为其他属性 可进行定位 

若有多个层 切需要设定层的层次关系 那么需要设置z-index属性 

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 

注释:元素可拥有负的 z-index 属性值。 

注释:Z-index 仅能在定位元素上奏效( position的值非static)! 

说明 
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。 

分享到:
评论

相关推荐

    详解html中 position属性用法(四种)

    position的四个属性值: 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性。 <div id=sub1>sub1 <div id=sub2>sub2 1. relative relative属性相对比较简单,我们要搞清它是相对哪个对象来进行...

    css属性详解说明,css属性详解说明

    background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...

    CSS之Position详解

    CSS之Position详解 CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的...

    css中position属性使用详解

    positon有4个属性:static relative absolute fixed,我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么...

    CSS中的 position属性sticky详解

    在开发移动端app时,经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候,让一部分内容作为navbar,也就是置顶显示,我们一般会使用js监听scroll事件来实现,但是新增的css属性position:sticky可以简单实现 ...

    详解CSS中position属性介绍(新增sticky)

    主要介绍了详解CSS中position属性介绍(新增sticky) 的相关资料,position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性,感兴趣的小...

    举例详解CSS中position属性的使用

    主要介绍了举例详解CSS中position属性的使用,是CSS入门学习中的基础知识,需要的朋友可以参考下

    前端布局-Position详解

    本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法。

    css关于position属性的用法详解(绝对定位和相对定位的混淆)

    挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法。 在此首先看一下官方对这两个属性值的解释: position 属性值的含义: static ...

    CSS 定位之position全面了解

    但是涉及到弹出层、浮层、页面广告插件等等,都需要CSS中的position属性来定位了,对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等,下面我们就position属性基本的这三个值的...

    详解css position 5种不同的值的用法

    position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性)。 有五种不同的值:   •static •relative •fixed •absolute •sticky 然后使用top,bottom,left和right属性定位元素...

    jQuery position() 函数详解以及jQuery中position函数的应用

    所谓”被定位的元素”,就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。 该函数返回一个坐标对象,该对象有一个left属性和top属性。属性值均为数字,它们都以像素(px)为单位...

    css属性详解

    背景:background-color, background-image, background-position, background-attachment, background-repeat; 文本:text-indent,color,direction,text-decoration,text-align,white-space,letter-spacing,word-...

    CSS背景background、background-position使用详解

    这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...

    CSS background属性(背景属性)详解

    •background-color 颜色 •background-position 位置 •background-size 大小 •background-repeat 如何重复背景图像 •background-origin 背景图片的定位区域 •background-clip 背景的绘制区域 •background-...

    jQuery的position()方法详解

    position()方法的定义和用法: 此方法获取匹配元素相对某些元素的偏移量。...1.如果父辈元素中没有采用定位的(position属性值为relative、absolute或者fixed),那么偏移量参考对象为窗口。 2.如果

Global site tag (gtag.js) - Google Analytics