咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

网站营销

小程序

06
联系我们

公司地址

人才招聘

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

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://dzwzjz.com/article/gdijdd.html

    其他资讯

    分享至：
    关于我们
    公司简介 发展历程
    服务项目
    高端网站建设 小程序开发 APP开发 网络营销
    建站知识
    行业新闻 建站学堂 常见问题
    联系我们
    公司地址 人才招聘
    成都 达州
    电话：028-86922220
    地址：成都市太升南路288号锦天国际A幢1002号
    电话：028-86922220
    地址：达州市南岸区弹子石腾龙大道58号2栋21-6
    友情链接： 艾瑞格衣柜   定制网站   郫县明安消防器材   成都免费网站建设   德阳网站建设   云服务器   高端定制网站建设   营销型网站建设   创新互联重庆   成都劢可为   
    版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14
    在线咨询
    服务热线
    服务热线：028-86922220
    TOP