CSS 中的 absoult 及 position 解析

本文深入探讨CSS中的绝对定位absolute,通过实验解析其特点:脱离标准文档流,以最近祖先定位或整个页面为基准,需配合偏移量使用。同时展示了不同情况下的定位效果,帮助理解absolute的工作原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在学习CSS中,对 position 的 absoult 非常不理解,就上网找了很多资料,然后发现了这一篇文章,看完就立马明白了,特地转过来以后继续学习,谢愿博主了

 

学web开发时,看到CSS样式中定位时 absolute 非常不理解,在网上找了很多解释反而弄得我更困惑了,于是决定自己实验,找出各种关系。关于CSS定位中absolute的特点,我总结起来无非是以下几点:

1.定位position为absolute属性的容器会脱离标准文档流,可以放在整个页面的各个位置(这个当然要与其他属性结合使用);

2.定位的标准为整个页面或者外包裹容器,同级元素不会成为absolute容器的定位标准;

3.当定位为absolute的容器的所有外包裹标签没有用position修饰的,则该容器以整个页面为标准进行定位;

4.当定位为absolute的容器的所有外包裹标签有用position修饰的,则该容器以离他最近的容器为标准进行定位;

 

首先展示一下实验的基础,以后所有的改动都是在此基础上进行的。

HTML文件如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>WebPageLayout_absolute</title>

    <link rel="stylesheet" type="text/css" href="WebPageLayout_absolute.css" />

</head>

<body>

<div id="wrap_out">

<div id="wrap_in">

    <div id="box1">box1</div>

    <div id="box2">box2</div>

    <div id="box3">box3</div>

</div>

</div>

</body>

</html>

CSS样式如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

*{

    padding0;

    margin0;

 

}

#wrap_out{

    background: lightseagreen;

    height600px;

    width80%;

    margin0 auto;

    border3px solid #000000;

}

#wrap_in{

    background: lightblue;

    height500px;

    width70%;

    margin0 auto;

    border3px solid #000000;

}

#box1{

    background: lightsalmon;

    height:30%;

}

#box2{

    background: lightcoral;

    height:30%;

}

#box3{

    background:lightgreen;

    height:30%;

}

效果如下:

 

 

一.首先进行所有外包裹没有position修饰的实验:

1.下面为box2添加absolute属性,不加偏移量;

*{
    padding: 0;
    margin: 0;

}
#wrap_out{
    background: lightseagreen;
    height: 600px;
    width: 80%;
    margin: 0 auto;
    border: 3px solid #000000;
}
#wrap_in{
    background: lightblue;
    height: 500px;
    width: 70%;
    margin: 0 auto;
    border: 3px solid #000000;
}
#box1{
    background: lightsalmon;
    height:30%;
}
#box2{
    background: lightcoral;
    height:30%;
    position: absolute;
}
#box3{
    background:lightgreen;
    height:30%;
}

效果如下:

总结:不加偏移的absolute容器并未完全脱离文档流,只是和她后边同级的其他容器脱离了,而与她前面的容器依然保持着文档中的顺序。

2.为position为absolute的容器加上偏移量

a.只加left偏移

b.只加top偏移

c.以上两个偏移都加上

复制代码

*{
    padding: 0;
    margin: 0;

}
#wrap_out{
    background: lightseagreen;
    height: 600px;
    width: 80%;
    margin: 0 auto;
    border: 3px solid #000000;
}
#wrap_in{
    background: lightblue;
    height: 500px;
    width: 70%;
    margin: 0 auto;
    border: 3px solid #000000;
}
#box1{
    background: lightsalmon;
    height:30%;
}
#box2{
    background: lightcoral;
    height:30%;
    position: absolute;
    left:10px;
    top:10px;
}
#box3{
    background:lightgreen;
    height:30%;
}

复制代码

效果如下:

总结:要想让absolute完全脱离文档流,必须在两个方向上都加偏移,哪怕是left:0;

   此时absolute容器以整个页面为标准定位

 

 

 

 

 

 

二.再进行外包裹有position修饰的容器的实验

1.外包裹有一个position修饰的容器:

复制代码

*{
    padding: 0;
    margin: 0;

}
#wrap_out{
    background: lightseagreen;
    height: 600px;
    width: 80%;
    margin: 0 auto;
    border: 3px solid #000000;

}
#wrap_in{
    background: lightblue;
    height: 500px;
    width: 70%;
    margin: 0 auto;
    border: 3px solid #000000;
    position: relative;
}
#box1{
    background: lightsalmon;
    height:30%;
}
#box2{
    background: lightcoral;
    height:30%;
    position: absolute;
    left:10px;
    top:10px;
}
#box3{
    background:lightgreen;
    height:30%;
}

复制代码

2.外包裹中有多个position修饰,即wrap_out和wrap_in都有position

效果图同上

总结:absolute定位的容器只以离她最近的外包裹元素为标准进行定位,而无论外包裹有几个容器被position修饰。

 

 

 

3.外包裹位置变化对absolute定位的影响

复制代码

*{
    padding: 0;
    margin: 0;

}
#wrap_out{
    background: lightseagreen;
    height: 600px;
    width: 80%;
    margin: 0 auto;
    border: 3px solid #000000;
    position: relative;

}
#wrap_in{
    background: lightblue;
    height: 500px;
    width: 70%;
    margin: 0 auto;
    border: 3px solid #000000;
    position: relative;
    left: 10px;
    top: 10px;
}
#box1{
    background: lightsalmon;
    height:30%;
}
#box2{
    background: lightcoral;
    height:30%;
    position: absolute;
    left:10px;
    top:10px;
}
#box3{
    background:lightgreen;
    height:30%;
}

复制代码

效果如下:

总结:absolute修饰的容器随着外包裹容器位置的变化而变化。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值