资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

CSS定位与层叠的用法

这篇文章主要介绍“CSS定位与层叠的用法”，在日常操作中，相信很多人在CSS定位与层叠的用法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS定位与层叠的用法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联专注于企业成都全网营销推广、网站重做改版、抚顺网站定制设计、自适应品牌网站建设、H5页面制作、商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为抚顺等各大城市提供网站开发制作服务。

position：static(静态定位)

当position属性定义为static时，可以将元素定义为静态位置，所谓静态位置就是各个元素在HTML文档流中应有的位置

podisition定位问题。所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认显示为静态位置，在静态定位状态下无法通过坐标值（top,left,right,bottom）来改变它的位置。

position：absolute(绝对定位)

当position属性定义为absolute时，元素会脱离文档流，完全不受文档流的影响，根据某个参照物坐标来定位它的位置.当绝对定位元素没有显示的指明top,right,bottom,left定位属性时，它还是暂时未脱离文档流，并受文档流的影响，具有相对定位的特性，但是它在文档流中的位置已经不存在了。如果绝对定位只显示的定位x轴或者Y轴，那它只具备这个方向上的定位能力，另一个方向仍然显示为相对定位的特性。

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

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

  1. box                                                             

  2.   boxA

     

  •   boxB   

  •    boxC

    •   

  •    boxD

    •   

  •     

  •    

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


    标题名称：CSS定位与层叠的用法
    网页地址：http://cdkjz.cn/article/gdijdd.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    边坡防护网成都网站推广公司定制网站网站建设方案盐亭网站制作公司广安网站建设腾讯云免备案主机精灵网成都微信开发广汉长尔科技

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图