关于position

一、position

一)语法:

 

看了那么久的语法,终于到了讲正题的时间了。

二)定位

1.相对定位:相对元素自己在没有定位之前的位置进行位移,元素仍然保留还没有原来的位置

 

 特性:

  1)不脱离文档流

  2)不影响元素本身的特性,行内元素是行内元素,块是块元素;

  3)如果没有给定位的值(top/right/bottom/left),对元素本身没有影响。

 

2.绝对定位:(一般配合相对定位来使用)相对于已经定位的最接近的祖先元素进行位移。

  注意:”父相子绝“如果没有找到绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是body/html。

         以下是的父元素是设置了相对定位;

特性:

  1)脱离文档流;

  2)行内元素支持宽高;(类似于float)

  3)块级元素”撑开“宽高;

  4)没有找到绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是body/htm;

  5)一般配合”相对定位“使用”父相子绝“;

  6)不支持margin:auto;

  7)绝对定位与float浮动不能同时使用;比如:一个大盒子里有用绝对定位或css float浮动定位,则IE6.0则不显示将对象改大的绝对定位或相对定位;

  8)定义的顺序

1 <style>
2     div{position: relative;height: 100px;width: 100px;}
3     span{position: absolute;height: 50px;width: 50px;top: 10px;left: 10px;}
4 </style>
5 <body>
6     <div>
7          <span>ddddd<span>
8     </div>
9 </body>

 

   9)left和right  /top和bottom   在一个对象中只能选一种来定义

  10)切勿滥用

 

3.固定定位:可想而知。。。无论怎么移动,它永远都在那里,一直与你同在。。哈哈

参考:http://www.barelyfitz.com/screencast/html-training/css/positioning/

中文:http://blog.jobbole.com/49320/

如果有什么不对的或者要补的地方 可以说出来吗?[可伶.gif]谢谢![玫瑰.jpg]

一直往前走吧 别想那么多了 还有青春可以耗  ——小晴哥

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值