永利官网ylg客户端position定位,position

position定位,position

position的英文意思呢是位置,方位;
地位,职位; 态度; 状态;

它有定位有四个值分别是绝对定位的两个值absolute和fixed,相对定位的relative,还有一个默认的值static而它呢没有定位。

永利官网ylg客户端 1

下面呢,我说先说一下:

    position的值,relative和absolute分别是相对于谁来进行定位的?

      absolute:生成绝对定位的元素,它是相对于最近一级的定位,而不是static的父元素来进行定位。

      fixed (老IE不支持)
 也是生成绝对定位的元素,但是它是相对于浏览器窗口或者是frame来进行定位。

      relative
生成相对定位的元素,相对于其在普通文档流中的位置进行定位。

      static 默认值。没有定位,元素出现在正常的文档流中。

 

然后呢,我说一下:

    CSS的定位

      relative
:相对定位,元素呢仍然处于正常的文档流中,但是可以通过 left、top、right
和 bottom 的 CSS规则来改变元素的位置。

      absolute
:绝对定位,元素脱离了正常的文档流,但是呢也可以通过left、top、right 和
bottom 的 CSS规则来改变元素的位置。

      fixed
:固定定位,元素脱离正常的文档流,也可以通过left、top、right 和 bottom
的 CSS规则来改变元素的位置。

      static :默认值,元素将按照正常文档流的规则来排列。

 

最后呢我要说:

    position的值不只有这四个,比如还有:

      以上图片上的inherit

      inherit :它规定应该从父元素继承 position
属性的值。

 

但是呢这是肯定又会有人说那么?z-index它不属于position的值么?以及它和position是什么关系?

    准确的说z-index呢它确实是不属于position的值。

    z-index要和position搭配起来用,具体用法如下:

  1、.a{

 

        position:relative;

 

        z-index:99;

 

    }

 

  2、
  position可以为relative(相对定位,)、absolute(绝对定位)、fixed(固定位置),inherit(继承父级特性)然后通
过top、right、bottom、left来进    行控制。relative是相对于原来的位置进行控制。absolute和fixed都是相对于文本的
左上角进行定位。如果父级用了relative,则absolute是相对于父级进行    的。

  3、如果没有加position时使用z-index是没有效果的,那么层级关系就会错乱,出现不想要得到的效果。

 

  如果大家还有什么不明白的话可以点此链接进行进一步的了解:

  

position的英文意思呢是
位置,方位; 地位,职位; 态度; 状态;
它有定位有四个值分别是绝对定位的两个值absolute和fixe…

CSS定位position,cssposition

position选项来定义元素的定位属性,选项有5个可选值:static、relative、absolute、fixed、inherit

属性值为relative、absolute、fixed时top | left | right| bottom |
z-index才能起作用。

static(默认值)

relative(相对定位)

absolute(绝对定位)

fixed(绝对定位,绝对与window浏览器,低版本浏览器不支持如ie6和ie7)

relative和static都是相对于文档其他元素进行定位,都属于相对定位的范畴,区别在于一个可用控制位移,一个不能

 

static(默认值)

如果使用默认值,在CSS中为元素定义top、left、right、bottom、z-index都不会生效

relative

relative的变现和默认值一样,只不过可用通过设置偏移量和z-index来控制相对于其他正常位置进行的偏移。

所有元素的定位(positon)默认值都是static,什么都不写就是相对定位,而使用position:relative在不设置topp、left、z-index、right、bottom值的情况下和默认值表现是一样的。

absolute和fixed

特点:

1、块级元素的宽度在未定义时不再为100%,而是根据内容自动调整

2、在不定义z-index的情况下,absoulte元素会覆盖在其他元素上。

3、它会脱离正常的文档流,不再占据空间,类似于浮动后的效果

absolute是相对上一个不为static的父元素进行绝对定位。如果不指定父元素的position,absolute将相对于整个html文档进行绝对定位。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。也就是说,不论网页如何滚动,该元素始终停留在屏幕的某个位置。如果我们希望左侧边控制栏始终对用户可见,就使用position:fixe来进行定位。

 

如果ie6和ie7不支持fixed属性怎么办

解决办法

用position:absolute

_top:expression(eval(document.documentElement.scrollTop))

position选项来定义元素的定位属性,选项有5个可选值:static、relative、absolute、fixed、inherit
属性值为relative、absolu…

发表评论

电子邮件地址不会被公开。 必填项已用*标注