css:position属性

原创 2017年01月07日 00:03:22

在CSS中,left、right、top、bottom表示距离左右上下的值,它们其实是有一个“参照物”的。要想让这4个属性发挥作用,必须给position属性设置(非static的)值。

position属性,有以下取值:

  • static:默认值,表示没有定位(没有参照物。所以left等值设置了也没用)
  • inherit:继承父元素的值
  • relative:相对定位,表示相对于“本来所在的位置”
  • absolute:绝对定位,表示相对于最近的而且指定了position为非static值的父元素、或者相对于body
  • fixed:固定在浏览器视角的某个位置,不随滚动条滚动而变化

其中比较难明白的是relative和absolute,下面通过一些例子来说说它们的特点。

1、relative:

relative值表示相对于原来的位置。什么叫“原来的位置”呢?就是元素不设置position属性(或者设置为static),在文档流中应该存在的位置。
然后,如果设置:left:10px,就意味着把该元素放置在距离该位置左侧10px的位置,表现为原地向右移动10px。比如这个例子:
relative

relative块的position属性为relative,它原来的位置,是在static块下面,但是设置了left和top属性,就相对于该位置移动了一些距离。
相应的代码在最后的“例子1”。

2、absolute:

  • 设置了absolute的元素,会寻找距离最近的、并且position属性设置成除static以外的值的父元素作为参照物,如果找不到,就以body作为参照。
  • 设置的left、right、top、bottom,都是相对于这个参照物。
  • 设置了absolute的元素,会脱离文档流(BTW,设置了float属性也会)。

    还是刚才那个例子,如果我把下面那个红色块由relative改成absolute,那么效果为:
    absolute

    可以看到,absolute块相对于左上角(body)偏移了一些距离。并且,该元素不在文档流中(黄色边框表示body的范畴。body并没有为absolute块预留一个位置,说明absolute块不在其中)。
    代码就不写出来了,就是把relative改成absolute。

    根据第一条规则,一般我们想要让元素相对于某个父元素,那么可以设置该元素为absolute,然后设置父元素为relative(不影响其位置)


补充代码:

  • 例子1:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Positioning</title>
    <style type="text/css">
        #container div {
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body style="border: 5px yellow solid;">
<div id="container">
    <div style="border: 1px blue solid; position: static;">
        static(default)
    </div>
    <div style="background-color: red; position: relative; left: 20px; top: 50px;">
        relative<br />left: 20px<br />top: 50px
    </div>
</div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

Css 详细解读定位属性 position 以及参数

Css 详细解读定位属性 position 以及参数position 定位属性,是CSS中非常重要的属性。除了文档流布局,就是定位布局了。本来我对这个问题没有放在心上,毕竟写了这么多年的css,对po...
  • FungLeo
  • FungLeo
  • 2015年11月26日 15:04
  • 6043

CSS中的定位——position属性

CSS定位指的是 改变元素在页面中的位置。 CSS定位机制: 普通流:元素按照其在HTML中的位置顺序决定排布的过程(也就是我不对元素进行定位的默认排布) 浮动 绝对布局 CSS定位包含的属性有: ...
  • qq_15096707
  • qq_15096707
  • 2016年01月07日 15:19
  • 1179

Css 详细解读定位属性 position 以及参数

Css 详细解读定位属性 position 以及参数position 定位属性,是CSS中非常重要的属性。除了文档流布局,就是定位布局了。本来我对这个问题没有放在心上,毕竟写了这么多年的css,对po...
  • FungLeo
  • FungLeo
  • 2015年11月26日 15:04
  • 6043

position定位属性中absolute和relative的区别

提问:如果页面内某个元素没有设定position属性,那么他是否具有position属性? 回答:具有position属性,并且属性值是static。原因在于网页里任一元素的默认position属性...
  • qq_17767355
  • qq_17767355
  • 2016年04月04日 15:35
  • 1853

HTML中position的五种属性值

*{margin:0;padding:0}
  • zfy920123
  • zfy920123
  • 2015年04月06日 22:00
  • 6897

css总结:HTML中用position进行相对定位时与float属性连用容易产生的误区

最近写静态网时将position与float属性连用,结果发现没有达到预期的效果(预期的设想是两个块彼此相连,而结果却是相互重叠了) 本人健忘,故将此记录下来,以下是我从中获取经验。 首先来看一个图示...
  • YaoDeBiAn
  • YaoDeBiAn
  • 2017年02月28日 20:30
  • 880

CSS: float属性和position属性的区别和应用

在使用div+css进行网页制作时,我们经常需要对某些元素进行一些必要的定位,使其能按照我们预想的效果呈现在页面合适的位置上,而float和position便是实现这一效果的两种方法。 一、浮动(f...
  • fivedoumi
  • fivedoumi
  • 2016年03月10日 21:33
  • 1356

css position属性的理解 文档流中位置与实际位置的不同

position定位详解。文档流详解。用元神与躯体的理论来理解div+css position中的定位属性。元素的实际位置与其在文档流中的位置并不一定是相同的...
  • Vincent_Field
  • Vincent_Field
  • 2016年04月05日 21:04
  • 1303

css布局中的position各种属性

Position属性四个值:static、fixed、absolute和relative的区别和用法   在用CSS+DIV进行布局的时候,一直对position的四个属性值relative...
  • m0_37836194
  • m0_37836194
  • 2017年11月02日 17:24
  • 29

使用属性position:fixed的时候如何才能让div居中

转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53994537 本文出自【我是干勾鱼的博客】 有的时候我们会需要让一个div...
  • dongdong9223
  • dongdong9223
  • 2017年01月03日 15:32
  • 2142
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css:position属性
举报原因:
原因补充:

(最多只允许输入30个字)