CSS |
您所在的位置：网站首页 › 使用浮动定位方式 › CSS |
CSS
|
css的一个小关卡position与float，它究竟有什么用？ 初学者在给页面进行布局时经常会利用div疯狂堆积，如果没有成功就使用margin扩张领地，现在需要告别这种方式了，使用定位和浮动使页面布局更简单。 这张主要讲的是position定位中的绝对定位和相对定位 一、绝对定位和相对定位
（一）学习定位和浮动前需要知道的两个知识点 （1）首先我们需要知道当设置TRBL(top、right、bottom、left)时 同时设置left和right只有left生效； 同时设置bottom和top只有top生效； （2）脱离文档流：需要明确脱离文档流不是脱离DOM树。脱离文档流的元素不再占据空间，如lrelative与其他元素重叠后还占据空间，而脱离了文档流的absolute就不再有空间即不会有本应属于它没移动的空白位置。
（二）absolute与relative （1）绝对定位absolute:脱离文档流，移动的时候自身的所占空间消失。如果没有父元素，absolute相对于html进行定位。 .weizhi { position : absolute ; top : 600px ; left : 60px ; }
当存在父元素时，以父元素为标准。 .weizhi { position : absolute ; float : left ; top : 500px ; left : 60px ; bottom : 20px ; } .weizhiSon { position : absolute ; top : 60px ; left : 50px ; }
当有一个同样是absolute的同样位置和大小的div，就算设置了浮动效果依然是盖在第一个div上的。这是因为absolute脱离了文档流，float没有效果。 .weizhi { position : absolute ; float : left ; top : 500px ; left : 60px ; bottom : 20px ; } .weizhi2 { position : absolute ; float : left ; top : 500px ; left : 60px ; bottom : 20px ; }
（2）相对定位relative 相对定位没有脱离文档流说明在元素移动时还保留着移动前的空间，这就是与absolute最重要的不同点。所以如果没有给relative设置移动值，对于元素是没有任何改变的。 怎样能看出来relative没有脱离文档流并保留了自己的位置呢，用一个absolute的div做对比 .Box1 { position : relative ; /* float: left; */ top : 10px ; left : 10px ; } .Box2 { position : relative ; /* float: left; */ top : 10px ; left : 10px ; }
由图可得在relative中允许重叠 二、relative与absolute搭配使用效果更佳 （1）使用relative“拴住”absolute 在刚才的定义里我们得知absolute绝对定位的元素的位置相对于最近的已定位父元素，所以就算使用absolute得元素拥有父元素，如果其没有进行position，那么absolute的元素依然会参照html进行定位 我们创建三个div div2 div3 当div3的两个父元素没有进行定位时： .Box3 { } .box_2 {} .box_22 { position : absolute ; top : 0px ; left : 0px ; }
当我给div1（深紫盒子）加上relative .Box3 {position: relative; } .box_2 {} .box_22 { position : absolute ; top : 0px ; left : 0px ; }
最后我们给div2加上relative并top:20px；left:60px; .Box3 { position : relative ; } .box_2 { top : 20px ; left : 600px ; position : relative ; } .box_22 { position : absolute ; top : 0px ; left : 0px ; }
这次div3以div2作为标准进行top:0;left:0;的定位了 所以我们经常使用relative对absolute进行规束 |
可以看出元素相对于进行改变，不影响其他元素，其原来空间依然存在，子元素也会随着relative的父元素进行移动。同样位移的元素并不会覆盖。
可见div3无视两个父元素直接以html进行定位
可以看出这次div3无视了div2（浅紫盒子）以div1（深紫盒子）为标准进行定位
【本文地址】
今日新闻 |
推荐新闻 |