CSS定位

定位

我们在了解相对定位之前,先来看一个案例:

 

     要想实现上述操作,我们可以使用外边距margin对标签进行处理,也可以使用浮动来进行标签的设置.将2号标签进行向左浮动,使之上移,接着对3号标签进行设置.这两种方法虽然能达到我们想要的结果,但是需要改动的步骤较多,不!利于我们开发.因此我们需要使用到定位

一.什么是定位?

• 定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置.这样十分方便我们进行页面的布局

• 使用position属性来进行设置定位

  • 可选值:

    • static: 默认值.元素是静止的,没有开启定位

      • 将position设置为static之后,元素仍在文档流中,若为块级元素,则会生成一个矩形框;若是行内元素,则会建立为行框,仍完好的放在其父元素里面

    • relative: 开启相对定位

      • 将position设置为relative之后,元素原本占用的空间将继续保留,所以它带来的偏移量相当于相对原来的位置进行移动(即元素偏移某个距离,元素仍保持其未定位前的形状)

    • absolute: 开启绝对定位

      • 将position设置为absolute之后,元素从文档流中完全删除,只是相对于它的包含块定位,包含块可能是文档流中的另一个元素或者是初始包含块.元素原来在文档流中所占的空间会关闭,就好像该元素原来不存在一样.

    • fiexd: 开启固定定位

      • 将position设置为fixed之后,就类似于是将包含块定为视窗本身的absolute一样,从而达到随着浏览器的滑动任然保持纹丝不动的效果

    • sticky: 开启粘滞定位

      • 将position设置为sticky之后,就可以实现某一元素贴附在另一元素的旁边,随着被贴附元素的移动而移动

二.偏移量

• 偏移量(offset):

当元素开启了定位以后,可以通过偏移量来设置元素的位置.就相当于我们之前使用的margin.但是偏移量相比margin更加灵活,不会影响到别的元素,只会影响自己.

• 可选值:

  • top: 定位元素与定位位置上边的距离,即决定垂直方向上的距离.top的值越大,元素越往上移,距离网页顶部的距离就越大

  • bottom: 定位元素与定位位置下边的距离.bottom的值越大,元素越往上移,距离网页底部的距离就越大 定位元素垂直方向上的属性值由top和bottom两个属性来控制.通常情况下我们只会使用其中一个

  • left:

    定位元素与水平方向上的距离.left的值越大.元素越往右移,距离网页左边的距离越大

  • right: 定位元素与水平方向上的距离.right的值越大,元素越往左移,距离网页右边的距离越大