Rumah > hujung hadapan web > tutorial css > 解析css的position里的relative和absolute的区别

解析css的position里的relative和absolute的区别

高洛峰
Lepaskan: 2017-03-28 17:27:10
asal
4240 orang telah melayarinya

position有以下属性static、inherit、fixed、absolute、relative
前三个好理解好区分:
static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
nherit:从父元素继承 position 属性的值。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。(即滚动浏览器的时候,元素永远固定显示在窗口可视区的某个位置)。

比较常用而且会引起初学者迷惑的是absolute和relative,它俩有什么分别呢?

一、先来看看W3C给的概念

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

relative:生成相对定位的元素,相对于其正常位置进行定位。

两者最核心的区别在于:absolute不受父元素里的其他元素影响,而relative会受到父元素里的其他元素影响。

二、一张图看懂absolute、relative的差别

解析css的position里的relative和absolute的区别

代码:

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

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

html,body,div,p{

margin: 0;

padding: 0;

}

#baba {

position: absolute;

left: 50px;

top:50px;

width: 300px;

height: 300px;

background: blue;

}

#baba p{

background:lightblue;

}

#erzi {

position: absolute;

left: 50px;

top:50px;

width: 200px;

height: 200px;

background: yellow;

}

</style>

</head>

<body id="body">

<div id="baba">

<p></p>

<div id="erzi">

<p></p>

</div>

</div>

<script>

var baba=document.getElementById("baba"),

erzi=document.getElementById("erzi");

baba.children[0].innerHTML="我是"+baba.id;

erzi.children[0].innerHTML="我是"+erzi.id;

</script>

</body>

</html>

Salin selepas log masuk

Atas ialah kandungan terperinci 解析css的position里的relative和absolute的区别 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan