由一位坛友的布局想到的定位问题：absolute和relative-白红宇

由一位坛友的布局想到的定位问题：absolute和relative

阅读量：4287 次

发布时间：2019-05-27

本文共 2638 字，大约阅读时间需要 8 分钟。

坛友的问题和相关代码如下：

看看下面的代码。运行有问题。但是如果我把 style=”position:absolute; top:20px;left:10px改成 style=”float:left;”就正常了，我想不明白为什么？

1: 
   
    逆光国际逆光国际逆光国际

2:

3: //创建一个showhidediv的方法，直接跟ID属性

4: function showhidediv(id){

5: var age=document.getElementById("msg_2");

6: var name=document.getElementById("msg_1");

7: if (id == 'name') {

8:    if (name.style.display=='none') {

9:     age.style.display='none';

10:     name.style.display='block';

11:    }

12: } else {

13:    if (age.style.display=='none') {

14:     name.style.display='none';

15:     age.style.display='block';

16:    }

17: }

18: }

19:

20:

21:

22:

23:

24: 
   
    Age：

25:

26: 
   
    林雨林

27: 
   
    18

我的第一反应就是LZ的问题出现在定位上，后来验证了我的想法。这里就不再赘述了。

看看w3school关于定位的一个概述：“对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。 ”

由此，我就想扒一扒position到底是个什么鸟样？

先写了一个正常情况下的文档：

1:

2:

3:

4:

5:         Location

6:

7:       .allDiv{

8:         width: 200px;

9:         height: 200px;

10:       }

11:       .div1{

12:         border: 1px solid red;

13:       }

14:       .div2{

15:         border: 1px solid blue;

16:       }

17:       .div3{

18:         border: 2px solid black;

19:         width: 100px;

20:         height: 100px;

21:       }

22:

23:

24:

25:       正常情况(没有采用定位,没有margin和padding)

26:

27:         这是div1

28:          
     
      这是div3

29:

30:       
     
      这是div2

31:

32:

效果:

然后修改div3，给div3进行绝对定位：

1: //修改div3的css

2: .div3{

3:         border: 2px solid black;

4:         width: 200px;

5:         height: 200px;

6:         position: absolute;

7:         top: 200px;

8:         left: 300px;

9:       }

10:

11: //修改div3的内容

12: 
     
      这是div3

13:

因为div1没有绝对定位,所以div3的位置是相对于body,即最初的包含元素

14:

效果：

div3的偏移距离是相对于body的左上角。然后我们给div2进行相对定位（元素任辉占据“原位置”）

1: //修改div2的css

2: .div2{

3:         border: 1px solid blue;

4:         position: relative;

5:         top: 100px;

6:         left: 200px;

7:       }

8: //修改一下div2的内容

9: 
     
      这是div2
      div2相对定位，相对"原位置"偏移

效果：

接下来呢，我们给div1和div3绝对定位，三个div的位置均会发生变化

1: //修改div1的css

2: .div1{

3:         border: 1px solid red;

4:         position: absolute;

5:       }

6:

7: //修改div2和div3的内容

8: 
     
      这是div3

因为div1绝对定位,所以div3的位置是相对于div1,即最近以定位的"祖先元素"

10:

11:

12: 
     
      这是div2

13:

div2相对定位，因为最近有定位元素，所以相对以定位元素(div1)偏移

14:

效果：

但是，当给div1进行相对定位时，div2的位置又奇妙的变化了

1: .div1{

2:         border: 1px solid red;

3:         position: relative;

4:       }

5: //为了对比明显，给div2添加了color:red样式

效果：

也就是说，相对定位在附近没有绝对定位元素时，则相对于原位置进行“偏移”；反之，则根据最近已经定位（position:absolute）的元素进行“偏移”。

以上测试均在FF中进行。不足之处，敬请谅解。

来源：

你可能感兴趣的文章

PHP之退出登录、登录标志的设计、商品管理设计

ISO框架设计之登录超时、未登录设计和断网重连的设计。。。。。

查看>>

iOS 之IQKeyboardManager键盘的使用

PHP之文件操作，http请求数据格式，模拟get和post，CURL模拟请求的使用

查看>>

PHP之电商网站解析设计及防攻击、错误日志、iframe局部刷新

查看>>

iOS之Header Search Paths和User Header Search Paths和library searchpath、pch（prefix header）、pods文件路径

iOS之WKWebView修改网页页面的值

查看>>

PHP之数据库设计

查看>>

iOS之NSLog控制台打印不完全的解决方法

查看>>