关于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属性的时候,会按照正常文档流进行排列。  

"把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部。 这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题。但问题是当浏览

如果要接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监控. window.addEventListener("message",function(){},false); ...

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

position定位详解。文档流详解。用元神与躯体的理论来理解div+css position中的定位属性。元素的实际位置与其在文档流中的位置并不一定是相同的...

css关于position属性的用法(绝对定位和相对定位的混淆)

挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法。 在此首先看一下官方对这两个属性值的解释: ...

CSS Position属性的学习

position属性真是萌新杀手T_T,参照谁定位?谁又脱离了文档流?理解了好长时间才摸清了一些门路。现在就对CSS position属性及HTML中有关定位的知识做一次梳理和总结。 一、从posi...
  • H_O_L_Y
  • H_O_L_Y
  • 2016年07月01日 01:14
  • 410

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

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

ife-task3:三栏式布局--再谈position 属性的基本知识

1.static:这个关键字使得这个元素使用正常的表现,即元素处在文档流中它当前的布局位置,top, right, bottom, left 和 z-index 属性无效。2.relative:相对定...

对CSS中的Position、Float属性的一些深入探讨

对CSS中的Position、Float属性的一些深入探讨 盒子模型 在HTML中元素的盒子模型分为两种:块状元素、行内元素,请注意这里的块状元素(Block)和行内元素(In...
  • YLXB2
  • YLXB2
  • 2017年01月12日 21:32
  • 191

对CSS中的Position、Float属性的一些深入探讨

对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及两个属性...

使用sqlserver2000的一点心得

  • 2008年10月30日 14:02
  • 727B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于position属性的一点心得
举报原因:
原因补充:

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