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

秒速五厘米 2022-08-12 00:28 121阅读 0赞

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

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

1: <div class="shayne">逆光国际逆光国际逆光国际</div>

2: <script language="javascript">

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: </script>

20: <div id="show" style="float:left;" onMouseMove='showhidediv("name")';><img src="file:///F|/Dreamveaver/NIC/images/金闪闪.jpg" width="75" height="54" alt="1" />

21:

22: </div>

23:

24: <div id="show1" style="position:absolute; top:20px;left:10px;onMouseMove='showhidediv("age")';>Age：</div>

25:

26: <div id="msg_1" style="display:none;float:left;">林雨林</div>

27: <div id="msg_2" style="display:none;float:left;">18</div>

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

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

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

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

1: <!DOCTYPE HTML>

2: <html>

3:     <head>

4:         <meta http-equiv="content-type" content="text/html;charset=utf-8">

5:         <title>Location</title>

6:     <style type="text/css">

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:     </style>

23:     </head>

24:     <body>

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

26:       <div class="div1 allDiv">

27:         这是div1

28:          <div class="div3">这是div3</div>

29:       </div>

30:       <div class="div2 allDiv">这是div2</div>

31:     </body>

32: </html>

效果:

![SouthEast][]

然后修改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: <div class="div3">这是div3

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

14: </div>

效果：

![SouthEast 1][]

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: <div class="div2 allDiv">这是div2<p>div2相对定位，相对"原位置"偏移</p></div>

效果：

![SouthEast 2][]

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

1: //修改div1的css

2: .div1{

3:         border: 1px solid red;

4:         position: absolute;

5:       }

6:

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

8: <div class="div3">这是div3

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

10: </div>

11:

12: <div class="div2 allDiv">这是div2

13: <p>div2相对定位，因为最近有定位元素，所以相对以定位元素(div1)偏移</p>

14: </div>

效果：

![SouthEast 3][]

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

1: .div1{

2:         border: 1px solid red;

3:         position: relative;

4:       }

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

**效果：**

![SouthEast 4][]

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

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

来源：[http://www.ido321.com/552.html][http_www.ido321.com_552.html]

[SouthEast]: /images/20220810/75a5cd91f76b472ab519c019058f0a4e.png
[SouthEast 1]: /images/20220810/03d1810fcade42cc889e4a4331b78777.png
[SouthEast 2]: /images/20220810/aea492b4418345118c972cccc77ba25e.png
[SouthEast 3]: /images/20220810/f1993c620a9045489a2f3980c609b860.png
[SouthEast 4]: /images/20220810/49103c6481c846a5b23b93e74fd4730b.png
[http_www.ido321.com_552.html]: http://www.ido321.com/552.html

发表评论取消回复

表情：

评论列表（有 0 条评论，121人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS中相对定位relative跟绝对定位absolute的详细作用

absolute：首先讲一下absolute, 设置absolute时他的父标签一定要设一个relative，因为absolute就是相对它来绝对布局的，这个时候只...

爱被打了一巴掌/ 2024年04月19日 15:20/ 0 赞/ 69 阅读

相关 relative相对于谁定位_CSS3中absolute、relative、fixed定位详解

点击“前端全栈之家” 关注我们 01 定位显示在CSS中可以通过postion属性定义元素定位显示，语法如下： postion: static|relative|

墨蓝/ 2023年01月12日 10:19/ 0 赞/ 156 阅读

相关 relative,absolute,static,fixed定位问题

在用CSS+DIV进行布局的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。

小咪咪/ 2022年08月19日 08:36/ 0 赞/ 176 阅读

相关关于坛友的一个布局问题的解答

来源：[http://www.ido321.com/1147.html][http_www.ido321.com_1147.html] 需求：让select、ul、文字

太过爱你忘了你带给我的痛/ 2022年08月13日 15:59/ 0 赞/ 143 阅读

相关问题：关于一个坛友的html布局实现

来源：[http://www.ido321.com/888.html][http_www.ido321.com_888.html] 坛友的需求如图 ![SouthEa

骑猪看日落/ 2022年08月13日 00:35/ 0 赞/ 124 阅读

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

坛友的问题和相关代码如下：看看下面的代码。运行有问题。但是如果我把 style=”position:absolute; top:20px;left:10px改成 style

秒速五厘米/ 2022年08月12日 00:28/ 0 赞/ 122 阅读

相关 position的值，relative和absolute分别相对于什么定位

absolute：生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。 fixed：（老IE不支持）生成绝对定位的元素，通常相对于

我会带着你远行/ 2022年06月08日 04:05/ 0 赞/ 152 阅读

相关 Html position（static | absolute | fixed | relative）定位

语法： position : static | absolute | fixed | relative 参数： static : 无特殊定位，对象遵循HTML定位

太过爱你忘了你带给我的痛/ 2022年03月20日 16:12/ 0 赞/ 285 阅读

相关 position的值以及各自的定位原点（relative和absolute）

①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。 ②

古城微笑少年丶/ 2022年03月14日 16:14/ 0 赞/ 170 阅读

相关 css定位 absolute relative fixed

一.absolute 相对拥有absolute或者relative父级进行定位，也就是他会一直寻找自己父级是否有absolute或者relative属性，如果找到，选择最

迈不过友情╰/ 2021年06月10日 20:41/ 0 赞/ 388 阅读