【转】关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)

转载 2018年04月15日 16:42:00

关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)   作者:王可利(Star·星星)

 

HTML中

相对定位:position:relative;

绝对定位:position:absolut;

 

1.相对定位(div与div之间的关系)

       body 标签其实就是一个大的盒子,在body里面设置 两个盒子div1 和 div2 ,而且两个盒子都给了它一个相对定位:position:relative;,那么div2 就会相对于 div1 排版,排在div1的下面,如果div2 给了一个浮动 float:left,那么div2 就会 和 div1并排。

     

      如果在上面的基础上,div1 和 div2 的里面都 添加一个 子盒子 ,div1 里面有一个 div3,div2里面有一个 div4,相对应地 div3 和 div4 也给了 相对定位的话 ,div3 就会相对 div1 这个父类来 相对定位,div4 就会相对 div2 这个父类来 相对定位。

      

      如果div1里面 同时拥有 一个 div3 和 一个 div4 的话,div3 和 div4 就会在 div1这个父类里面进行相对定位,与 div2没有直接的影响。。

     

2.绝对定位(div与div之间的关系)

     绝对定位需要记住的口诀是:

     1.绝对定位会找到与自己最近的父类来定位,不是自己的父类与自己无关。

     2.绝对定位找到了自己的父类之后,要看这个父类是否进行了相对定位,没有相对定位的话就不会找这个父类来定位。

     总结:绝对定位会寻找一个 距离自己最近的 父类 ,并且这个父类进行了 相对定位,那么这个盒子就会找这个已经有了相对定位的父类来定位。

   

 例子如下:

        body标签里面  定义盒子 div1,div1 包含 div2 ,div2 包含 div3 。

        情况1:div1、div2 盒子 都设置了 相对定位 ,div3 设置了 绝对定位。

        分析:body、div1、div2 都是 div3 的父类,而距离div3最近的父类是div2,所以div3 就会在 div2 里面进行绝对定位。。

        

         

        情况2:div1设置了 相对定位 ,div2没有设置相对定位,div3 设置了绝对定位。

        分析:body、div1、div2 都是 div3 的父类,距离div3最近的父类是div2,但是div2 没有设置 相对定位,所以就继续找有相对定位的父类,div1 是 div3 的父类 ,进行了相对定位里面的父类 最近的那一个,那么 就会在 div1 里面进行绝对定位。。

       

 

 

这个是本人自己在学习当中总结的一些网页相关的排版定位技巧,希望可以对大家有帮助。。有什么不足,由大家来补充。谢谢。。

html中的相对定位 和 绝对定位

html中positon:relative; position:absolute;
  • gengbaolong
  • gengbaolong
  • 2017-04-30 17:18:31
  • 1138

看完这个,css中position的绝对定位相对定位就懂了

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对...
  • cyyax
  • cyyax
  • 2016-01-29 14:32:26
  • 18186

HTML页面绝对定位+相对定位

一.绝对定位position: absolute 首先你要知道“绝对定位”的概念:它是以最近一个已经定位的祖先为基准进行定位,如果没有就以屏幕定位!...
  • zhaolisha9232
  • zhaolisha9232
  • 2016-03-25 08:05:14
  • 3396

【HTML+CSS】浅谈:相对定位与绝对定位

相对定位和绝对定位 ·定位标签:position  ·包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出...
  • csdn_yudong
  • csdn_yudong
  • 2015-07-20 15:25:34
  • 1312

CSS中几种控制页面布局的定位机制(相对定位与绝对定位)

CSS中几种控制页面布局的定位机制对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,我去年学习web编程的时候就对这个一知半解,今天,回过头来再次学习we...
  • duang0626
  • duang0626
  • 2017-07-13 22:17:23
  • 1338

html css中的定位

  • 2015年04月03日 16:19
  • 5.89MB
  • 下载

Css中关于定位的理解,相对定位、绝对定位、浮动定位

Css中的定位网页制作中扮演着举足轻重的角色,通过定位,可以轻松的使快元素放置在合适的位置。定位分为三种,绝对定位、相对定位、浮动定位。绝对定位会使同级元素重新从(0,0)坐标开始定位。相对定位会考虑...
  • ziwoods
  • ziwoods
  • 2015-11-15 19:31:07
  • 1391

html 盒子模型基础(相对定位,绝对定位,固定定位)(八)

1.相对定位: .box1{ width: 200px; height: 200px; background-color: red; ...
  • u010853130
  • u010853130
  • 2017-02-07 11:43:21
  • 2178

[html5入门-16]position的几种定位区别

Html5中position的定位主要分为绝对定位,相对定位,静态定位,固定定位,继承父级定位,语法分别为position:absolute|relative|static|fixed|inhret,...
  • weixin_36185028
  • weixin_36185028
  • 2016-10-06 02:08:16
  • 2035

【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

到这里可以验证当使用`top` `right` `bottom` `left` ***(这四个属性可以设置具体的像素数也可以设置百分比)***这样属性改变元素的位置的时候,不会影响其他元素的位置。而使...
  • yisuowushinian
  • yisuowushinian
  • 2015-05-29 23:01:19
  • 6241
收藏助手
不良信息举报
您举报文章:【转】关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)
举报原因:
原因补充:

(最多只允许输入30个字)