<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位和固定定位</title>
<!-- 绝对定位：基于XXX定位，上下左右
1、没有父级元素的定位下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
-->
<!-- 固定定位fixed -->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
position: relative;
}
#first{
border: 1px dashed rgb(50, 224, 20);
background-color: rgb(94, 249, 66);
}
#second{
border: 1px dashed rgb(186, 219, 19);
background-color:rgb(192, 213, 86) ;
position: absolute;
right: 30px;
}
#third{
border: 1px dashed rgb(17, 227, 238);
background-color:rgb(88, 237, 245) ;
}
body{
height: 1000px;
}
div:nth-of-type(2){
/* 绝对定位 */
width: 100px;
height: 100px;
background: yellow;
position: absolute;
right: 0px;
bottom: 0px;
}
div:nth-of-type(3){
/* 固定定位 */
width: 50px;
height: 50px;
background: red;
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
<div>div1</div>
<div>div2</div>
</body>
</html>
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
