关于css的层模型中的绝对定位？？-慕课网

关于css的层模型中的绝对定位？？

来源：13-6 万事无绝对 -层模型之绝对定位

学习小高

2017-01-15 08:53

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

其中，【然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。】，，，这句话，“具有定位属性的父包含块”，，，那么，在设置子一代的绝对定位，需要为父包含块设置定位吗？？？完整的是怎么设置的？？

写回答关注

2回答

时光纪0

2017-02-22 23:05:13

不一定需要，看需求，如果父块不用设置位置，那就不用

0 0

天夏不舞: 2017-01-15 10:51:06

比如div1里有个子div2，那么需要给div1设置position:relative,div2设置position:absolute. 之后div2的位置就会以div1为参照定位了。

至于left、right、top、bottom属性，意思是相对父DIV对应方向的距离，具体可以复制修改以下代码理解。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style>
	#div1 {
		position:relative; /* 设置相对定位 */
		width:200px;
		height:200px;
		border:2px solid black;
	}
	#div2 {
		position:absolute;  /* 设置绝对定位 */
		width:100px;
		height:100px;
		border:1px dashed red;
		right:0;
		top:50px;
	}
</style>
</head>
<body>
    <div id="div1">父DIV
		<div id="div2">子DIV</div>
	</div>
</body>
</html>

0 1

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225808 学习 · 18234 问题

查看课程

相似问题

层模型--绝对定位

回答 2

层模型-绝对定位

回答 2

层模型—绝对定位

回答 4

层模型-绝对定位？？

回答 2

层模型中相对定位和绝对定位区别

回答 3

打开慕课网App查看更多内容