重庆分公司

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

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

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

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

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

咨询热线 ：

028-86922220

• 结果图

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

• 代码块

• 结果图

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

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

• 代码块

• 结果图

• 相对定位特点分析如下：

• 相对定位的元素它没有脱离标准文档流。

• 相对定位的元素如果没有设置坐标它会在原地位置。

• 相对定位的元素设置了坐标位置，它会根据原来的位置开始计算移动的位置。

• 相对定位的元素它比标准文档流的元素层级要高，会覆盖标准文档流中的元素。

• 相对定位的元素它可以设置为负数。

绝对定位实践

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

• 代码块

• 结果图

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

• 代码块

• 结果图

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

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

• 代码块

• 结果图

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

• 代码块

• 结果图

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

• 绝对定位特点分析如下：

• 绝对定位元素它已经脱离了标准文档流。

• 绝对定位元素它会覆盖掉标准文档流的元素。

• 绝对定位元素它已经不再占用任何空间了。

• 绝对定位元素它根据父元素之祖先元素之间是否有定位，如果有根据最近元素进行设置定位的位置，如果没有根据body元素进行定位。

• 绝对定位元素的父元素可以是用任何定位包括绝对定位，笔者建议是用相对定位，一般相对定位是配合着绝对定位使用的。

以上就是“CSS中怎么使用定位”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

分享至：

   

关于我们

公司简介 发展历程

服务项目

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

建站知识

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

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



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



电话：028-86922220



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

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