关于position属性的一点心得

原创 2012年03月23日 14:26:58

   今天去面试的时候,面试官问我一个问题,你说说position是怎么用的,我支支吾吾的说的断断续续,导致面试官很不高兴,就说还是不行,所以,我现在果断回来认认真真的看了一回,我果断弄懂了,现在呢,就跟大家说下我的一点带你心得吧!

   总得来说呢,position有四个属性,static、relative、absulote、fixed。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
.parent{width:500px; height:300px; background:#669966; border:1px solid #000000; }
.sub1{width:50px; height:100px; background:#FF0000; border:1px solid #000;}
.sub2{width:100px; height:100px; background:#0000FF; border:1px solid #000;  }
</style>


<body>
<div class="parent">
    <div class="sub1"></div>
    <div class="sub2"></div>
</div>
</body>
</html>

以上代码表示的图示:

      首先呢,先说说static这个属性吧,是一个默认值,说白了,就是让模块保持在原来位置上,没有任何的移动效果;这里呢就不多说了;

  第二点,我们来说下,relative这个属性,这个属性关键的一点就是我们要弄明白它是根据哪个对象来进行偏移的,如果我们把上面代码中的修改为

    .sub1{width:50px; height:100px; background:#FF0000; border:1px solid #000;position:relative;top:5px;left:10px;}下面我就来看看图示:我们从图中,应该能看出来它是根据parent这个对象来进行偏移的,   总的来说,sub2是没有发生任何偏移的,注意,relative是基于margin的左上侧来进行偏移的。

  第三点呢,我们来说说,absulote这个属性吧,这个属性呢,总是给人家误导的,其实,并不是根据浏览器的窗口来进行定位的,其实这是fixed这个属性的特点。那么,当给sub1定义position属性为ansulote时,到底是以谁为对象来进行偏移呢,这里分为俩个情况;
1>、就是sub1的父对象(parent)也设置了posotion属性的时候,不管是relative或者absulote的时候,这时候,sub1就会根据parent来进行偏移,当parent设置了maigin、padding、borrer等属性的时候,他会直接从padding的左上角进行偏移,这时候的sub2就会占据sub1的位置,

                                                                                               

2>、如果sub1不存在一个position这个属性的时候,那么就会以body为队形,以浏览器的窗口进行定位。

3、fixed属性,总是以浏览器窗口进行定位的。

4、static,一般不设置position属性的时候,会按照正常文档流进行排列。  

详解CSS position属性

position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础...
  • wx11055
  • wx11055
  • 2016年01月03日 21:25
  • 163

关于position标签的一点心得

position position是css中的一个非常常见的属性,同时也非常重要,我们在做前端布局时,position这个属性可以说是必不可少,如果不弄清楚它的值得含义,对于前端工作者来说是非常麻...
  • qq_28391351
  • qq_28391351
  • 2017年01月08日 16:28
  • 146

Position属性四个值区别和用法

1、static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。2、relative(相对定位):生成相对定...
  • qq_17431235
  • qq_17431235
  • 2017年02月20日 17:55
  • 522

position属性心得

这段时间在做页面的布局,用到position属性,它是用来给页面元素定位的,一旦元素设置了这个属性,那么该元素就脱离页面的正常流而处于更高的层次。 position属性有static(默认的)、re...
  • aaa1117a8w5s6d
  • aaa1117a8w5s6d
  • 2012年11月13日 18:06
  • 470

谈谈我用Unity5的AssetBundle踩到的几个坑

http://liweizhaolili.lofter.com/post/1cc70144_885b047 谈谈我用Unity5的AssetBundle踩到的几个坑 在上段时间摸索...
  • anypkv
  • anypkv
  • 2017年07月05日 11:13
  • 189

DIV布局属性中position属性的四大用法

正确的使用DIV布局属性之position属性 Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Posit...
  • yangdeli888
  • yangdeli888
  • 2012年07月09日 18:53
  • 13405

HTML中position的五种属性值

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

position定位几种常用的属性区分

position定位有一个默认的属性值:static。但是它常用的属性还是以下3个:relative、fixed、absolute。 relative: 如果仅仅是像这样:position:rel...
  • t111t
  • t111t
  • 2015年04月19日 13:02
  • 857

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

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

style中position的属性值详解

    Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Position来完成。  Position属性有四个可...
  • marty_zhu
  • marty_zhu
  • 2007年12月01日 15:18
  • 21795
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于position属性的一点心得
举报原因:
原因补充:

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