美文网首页
CSS中的Position的一点补充

CSS中的Position的一点补充

作者: MM_大琦 | 来源:发表于2015-12-24 00:26 被阅读0次

Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。主要有以下4个值:

① absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。
② relative :相对定位;脱离文档流的布局,但还在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
③ fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置。
④ static :默认值;默认布局。

position的辅助属性

position属性只是使元素脱离文档流,要想此元素能按照希望的位置显示,就需要使用下面的属性(position:static不支持这些):

① left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。

② right :表示向元素的右边插入多少像素,使元素向左移动多少像素。

③ top :表示向元素的上方插入多少像素,使元素向下移动多少像素。

④ bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。

上面属性的值可以为负,单位:px 。

课上我们说了其他的三个方式那这里主要说下static,关于static我们需要知道,static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。

static的应用场景

IE6的特殊处理。

相关文章

  • CSS中的Position的一点补充

    Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。主要有以下4个值: ① ...

  • 2017-12-30

    position:absolute and position:relative 的理解 Absolute,CSS中...

  • CSS中的position

    HTML中的三种布局方式 浮动 标准流 定位 position属性的意义 position属性决定了元素将如...

  • CSS - 定位

    CSS 中的层级概念 CSS中分为3层 最上层:定位元素层(position:relative、position:...

  • css粘性定位position: sticky

    css粘性定位position:sticky问题采坑position: sticky 详解(防坑指南)CSS中po...

  • 【图解CSS#Position】

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式。...

  • 关于css

    在最近的学习中,对css position 理解不好,在网上找了找,觉得关于css position 看一下文章就...

  • CSS position 详解

    CSS 中的 position 属性用来设置元素的定位方式。 position 的值有 static、relati...

  • CSS中的position属性

    position是CSS中非常重要的定位元素,有点惭愧一直都没有把这个概念吃透 absolute是按照父元素来定位...

  • CSS中的position定位

    1.HTML中的三种布局方式 标准流浮动定位 2.HTML中的两大元素 块级元素 div、H1~H6、t...

网友评论

      本文标题:CSS中的Position的一点补充

      本文链接:https://www.haomeiwen.com/subject/vwyvhttx.html