重庆分公司,新征程启航

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

如何在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://cqcxhl.cn/article/dheije.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP