资讯

精准传达 • 有效沟通

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

网站建设 >

查看其它板块

如何在CSS中使用定位

今天就跟大家聊聊有关如何在CSS中使用定位，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

在温县等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站制作、成都做网站 网站设计制作按需开发网站,公司网站建设,企业网站建设,品牌网站制作,营销型网站,外贸营销网站建设,温县网站建设费用合理。

CSS中定位介绍

position 属性在英文单词中表示 位置 的意思，在 CSS 中主要作用设置元素的定位。

CSS 中一共有 3 种定位如下： 

 
属性值描述
fixed设置固定定位。
relative设置相对定位。
absolute设置绝对定位。

固定定位实践

在实践固定定位之前我们先看看代码结构是什么样子的呢。

代码块





  
  
  
  定位
  



   
   

结果图

如何在CSS中使用定位

现在笔者将 h2 元素设置为固定定位，看看和上面的结构实践有什么区别，然后我们在分析一些固定定位的特点。

代码块





  
  
  
  定位
  



   
   

结果图

如何在CSS中使用定位

固定定位特点分析如下：

  •  固定定位，它是相对于浏览器窗口进行设置定位，不管页面如果滚动，固定定位的元素位置不会受到任何影响。

  • 固定定位的元素特点：它已经脱离了标准文档流。

  • 固定定位的元素特点：它的层级比标准文档流的元素要高，所以我们给h2标签设置了固定定位会压盖到div标签。

  • 固定定位的元素特点：h2标签在div标签之上，所以固定定位的元素已经不再占用任何空间

相对定位实践

在实践相对定位之前我们先看看代码结构是什么样子的呢。

代码块





  
  
  
  定位
  



   
     
     
     
   

结果图

如何在CSS中使用定位

现在笔者将 class 属性值为 .div2 元素设置为相对定位，看看和上面的结构实践有什么区别，然后我们在分析一些相对定位的特点。

代码块





  
  
  
  定位
  



   
     
     
     
   

结果图

如何在CSS中使用定位

注意：在我们没有给相对定位设置坐标位置，它是不会有任何移动的。

笔者给 class 属性值为 div2 元素设置定位坐标实践。

代码块





  
  
  
  定位
  



   
     
     
     
   

结果图

如何在CSS中使用定位

相对定位特点分析如下：

 绝对定位实践

在实践绝对定位之前我们先看看代码结构是什么样子的呢。

代码块





  
  
  
  定位
  



   
     
     
     
   

结果图

如何在CSS中使用定位

现在笔者将 class 属性值为 .div2 元素设置为绝对定位，看看和上面的结构实践有什么区别，然后我们在分析一些绝对定位的特点。

代码块





  
  
  
  定位
  



   
     
     
     
   

结果图

如何在CSS中使用定位

注意：绝对定位已经脱离了标准文档流。

笔者给 class 属性值为 div2 元素设置定位坐标实践，为了让读者有一个直观的印象我给最外层的 div 元素设置了居中对齐。

代码块





  
  
  
  定位
  



   
     
     
     
   

结果图

如何在CSS中使用定位

注意：绝对定位元素为什么会出现在浏览器左边缘呢，绝对定位移动原理：绝对定位的元素它会寻找父元素是否有定位，如果有定位它会根据父元素进行定位，如果父元素没有设置定位，它会在找父元素的父元素是否有定位，以此类推直到 body 元素就停止了，因为 body 元素就是浏览器的位置，说了这么多笔者给新学者一个直观的印象，那咱们就实践见真招。

代码块





  
  
  
  定位
  



   
     
     
     
   

结果图

如何在CSS中使用定位

注意：现在笔者给绝对定位坐标更换成了向右定位，父元素设置了一个相对定位，在这里就不多进行实践了，如果定位的父元素的父元素也就是爷爷的元素，父元素和爷爷元素同时都设置了定位，该元素会根据父元素决定定位而不是爷爷元素。

绝对定位特点分析如下：

看完上述内容，你们对如何在CSS中使用定位有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。


网页名称：如何在CSS中使用定位
本文路径：http://cdkjz.cn/article/peepce.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

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

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

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

在线咨询 提交需求
友情链接 交换友情链接
成都免费网站建设公司服务器托管造型师设计网络口碑营销成都塑料加工网站定制成都品牌网站设计自适应网站建设申请域名成都响应式网站

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

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

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