码迷,mamicode.com
首页 > 其他好文 > 详细

对布局定位设置-position

时间:2017-11-20 23:17:30      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:tom   文档流   一个   absolute   内嵌   class   固定   fixed   bsp   

  使用position属性,会激活5个属性

  • left
  • right
  • bottom
  • top
  • z-index(-1至999)

 注:z-index:会改变内容的层级关系,

  1、绝对定位

position: absolute

影响:

  • 元素会脱离文档流==元素原本占据空间释放
  • 原点计算:最近一个有定位的父元素作为原点参考,如果没有,跟页面(0,0)作为参考
  • 绝对定位是内嵌元素时,也可以设置宽高。

实例:

1 .div1{
2 width: 400px;
3 height: 400px;
4 background-color: greenyellow;
5 position: absolute;    *绝对定位,在本身的位置浮动起来了*/
6 left: 0px;   * left,right设置宽高有效,必须在使用定位后设置后*/
7 right: 0px;
9 }

  2、相对定位
position: relative;

  • 没有脱离文档流,原本元素在标准文档流之中占据的位置不会释放不会像-->
  • 根据自身在文档流的位置作为原点计算
  • 父相子绝
  • 能保证文档流不受影响
  • 能给子元素做一个参考点

.实例:

 1 div1{
 2 position: relative;
 3 width: 200px;
 4 background-color: red;
 5 height: 200px;
 6 left: 70px
 7 }

9 .div1_1{ 10 width: 100px; 11 height: 100px; 12 position: absolute; 13 /*position: relative;*/ 14 background-color: yellow; 15 left: 70px; 16 }

 

1 <div class="div1">、、、、、、、、、、、父
2 <div class="div1_1"></div>、、、、子
3 </div>
4 <div class="div2"></div>、、、、、、、父兄

 注:子父元素相对定位时,子元素会浮在父元素上面。

 

  3、固定定位

  • 脱离文档流
  • 原点根据浏览器窗口(0,0)根父元素没有任何关系,不会跟父元素走
  • 能保证文档流不受影响
  • 能给子元素绝对定位提供原点参考。

实例:

1 .div3{
2 width: 300px;
3 height: 300px;
4 background-color: hotpink;
5 position: fixed;
6 right: 0px;
7 border: 0px;
8 }

 

对布局定位设置-position

标签:tom   文档流   一个   absolute   内嵌   class   固定   fixed   bsp   

原文地址:http://www.cnblogs.com/hlrblog/p/7868309.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!