<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<!--绝对定位absolute:-->
<!--决定定位是元素在移动位置的时候,是相对于它父元素来说的-->
<!--语法:-->
<!--选择器 {position:absolute;}-->
<!--绝对定位的特定:-->
<!--1.如果没有父元素或者父元素没有定位,则以浏览器为准定位-->
<!--2.如果父元素有定位(相对、绝对、固定定位),则以最近一级的有定位父元素为参考点移动位置-->
<!--3.绝对定位不再占有原先的位置。-->
<style>
.yeye {
position: relative;
width: 800px;
height: 800px;
background-color: hotpink;
padding: 50px;
}
.father {
/*position: relative;*/
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
css自绝父相
最新推荐文章于 2023-12-20 15:49:34 发布