定位:(坐标确定,参照点)
position:
- absolute 绝对定位
- relative 相对定为
一、坐标确定
left
right
top
bottom
二、参照点
参照点选取取决于绝对定位还是相对定为
1.绝对定位:当前元素的第一个应用相对或绝对定位的祖先元素,找不到用浏览器的左上角
html>
<html>
<head>
<meta charset="utf-8">
<title>
<style >
*{margin: 0px; padding: 0px;}
</style>
</title>
</head>
<body>
<div style="width: 300px; height: 300px; background: red">
<div style="width: 200px; height: 200px; background: green;position: absolute; left: 30px; top: 120px">
<div style="width: 100px; height: 100px; background: yellow">
<div style="width: 50px; height: 50px; background: currentColor;position: absolute; left: 120px; top: 20px">
</div>
</div>
</div>
</div>
</body>
</html>
2.相对定位:当前元素原来未设置定位时的位置
最常见的应用:
父元素设置relative
子元素设置absolute
优点:灵活
缺点:不易掌控
一旦元素设置了定位属性,就脱离文档流,父元素高度发生变化
三、那么如何让父元素自动适应子元素高度?
1.父元素的height=子元素的height (用js)
2.父元素最后一个子元素设置clear:both