重庆分公司

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

CSS Code复制内容到剪贴板

1. #box{   

2.  margin:40px auto;   

3.  width:400px;   

4.  height:400px;   

5.  border:2px red solid;   

6. }   

7. #boxA{   

8.  position:absolute;   

9.  top:100px;   

10.  left:100px;   

11.  width:50px;   

12.  height:50px;   

13.  background: #3E7DB0;   

14. }  

大盒子box在整个网页中距顶部40px居中显示，但是boxA由于position定位为绝对定位，它脱离了大盒子，距整个网页左边100px顶部100px，当元素定义为绝对定位，可以根据结合它的坐标属性（top,left,bottom,right）来精确定位它的位置

position:relative(相对定位)

相对定位好似一种折中的方法，是在静态定位和绝对定位中去一个平衡点，所谓相对定位就是使被应用的元素不脱离文档流，却能够通过坐标值以原始位置为参照物进行偏移。

坐标值：
top:表示定位元素顶边外壁到原始位置顶部外壁的距离
right:表示定位元素右边外壁到原始位置元素右侧外壁的距离
left:表示定位元素左边外壁到原始位置元素左侧外壁的距离
bottom:表示定位元素底边外壁到原始位置元素底部外壁的距离

XML/HTML Code复制内容到剪贴板

1.   

2.      boxA  

3.      boxB   

4.       boxC  

5.       boxD  

6.           

7.       

CSS Code复制内容到剪贴板

1. #box{   

2.  margin:40px auto;   

3.  width:400px;   

4.  height:400px;   

5.  border:2px red solid;   

6. }   

7. #boxA{   

8.  position:relative;   

9.  top:100px;   

10.  left:100px;   

11.  width:50px;   

12.  height:50px;   

13.  background: #3E7DB0;   

14. }   

15. #boxB{   

16.  width:50px;   

17.  height:150px;   

18.  background: #B9C8C5;   

19. }   

20. #boxC{   

21.  width:50px;   

22.  height:50px;   

23.  background: #1D92C8;   

24. }   

25. #boxD{   

26.  width:400px;   

27.  height:50px;   

28.  background: #086499;   

29. }  

大盒子box在整个网页中距顶部40px居中显示，当元素boxA由于position定义为相对定位，相对于它本身的位置的位置进行偏移，据原先的位置左100px和顶部100px，当遇到文档流boxD时，它会覆盖boxD。相对定位虽然偏离了原始位置，但是它的原始位置所占据的空间仍然保留着，并没有被其它元素所占据。

position：fixed(固定定位)

固定定位是绝对定位的一种特殊形式，它是以浏览器窗口作为参照物来定义网页元素，如果定义某个元素固定显示，则该元素不在受文档流的影响。他始终以浏览器窗口来定位自己显示的显示位置，不管浏览器窗口如何滚动，也不管浏览器窗口大小如何变化，该元素都会显示在浏览器窗口内。通俗的说就是以浏览器窗口的四条边作为坐标系来定位元素的位置。

XML/HTML Code复制内容到剪贴板

1. box     

2. fixed  

CSS Code复制内容到剪贴板

1. #box{   

2.  margin:40px auto;   

3.  width:400px;   

4.  height:400px;   

5.  border:2px red solid;   

6.  position:fixed;   

7. left:100px;   

8. top:100px;    

9. }   

10. #fixed{   

11.  height:4000px;   

12. }  

当把box定义为固定定位时，box永远都是在浏览器窗口内，fixed属性还可通过left，right,top,bottom来控制从流浪器不同边框来进行定位。

相对定位(relative)与绝对定位(absolute)： 

XML/HTML Code复制内容到剪贴板

1. box   

2.   boxA  

3.   boxB   

4.    boxC  

5.    boxD  

6.     

7.    

如果box把 position属性定义为relative，只有它的子元素boxA和boxB position属性定义为absolute才能相对box定位，而他的孙子元素boxC和boxD把position定义为absolute并不能相对box来定位。但是如果把boxB的position属性定义为relative，它底下的子元素boxC和boxD就能相对于父元素boxB来定位，所以，把position属性定义为relative的元素，只有它的子元素才能相对它定位，孙子元素并不能相对它定位。相对定位与绝对定位的结合使用可以更加精确的控制网页元素，设计出更强大的布局效果。

position属性定位小工具：www.linxz.de/css_tool/position_demo.html

层叠：

css可以通过z-index属性来排列不同定位元素之间的层叠顺序，该属性可以设置任何整数值，数值越大，所排列的顺序越靠前。

XML/HTML Code复制内容到剪贴板

1. box   

2. 2   boxA  

3. 3   boxB  

4. 4   boxC  

5. 5    

CSS Code复制内容到剪贴板

1. #boxA,#boxB,#boxC{   

2.  width:100px;   

3.  height:200px;   

4.  position:absolute;   

5. }   

6. #boxA{   

7.  background: #086499;   

8.  z-index:1;   

9.  left:100px;   

10. }   

11. #boxB{   

12.  top:50px;   

13.  left:50px;   

14.  background: #B9C8C5;   

15.  z-index:2;   

16. }   

17. #boxC{   

18.  top:100px;   

19.  background: #1D92C8;   

20.  z-index:3;   

21. }  

boxC排在最上面，boxB在最中间，boxA在最后。z-index的值越大越靠前。

到此，关于“CSS定位与层叠的用法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4