本文介绍了CSS中的绝对定位和固定定位技巧，通过示例展示了如何使用`position: absolute;`和`position: fixed;`实现元素相对于自身或浏览器的定位，并结合了相对定位和实际应用场景。
<!--
相对定位
-相对于自己原来的位置进行偏移
top:-10px;往上移10px
left: -10px;往左移10px
bottom: +10px;往下移10px
right: +10px;往右移10px
绝对定位
-没有父级元素定位的前提下相对于浏览器位置不变（在浏览器中位置不变，随浏览器滚动）
-position:absolute;
固定定位-（不随浏览器滚动，在一个位置不动）
-position:fixed;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 1000px;
}
#one{
/*绝对定位*/
width: 100px;
height: 100px;
background-color: rebeccapurple;
position: absolute;
right: 0px;
bottom: 0px;
}
#two{
/*固定定位*/
width: 50px;
height: 50px;
background-color:cadetblue;
position: fixed;
right: 0px;
bottom: 0px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
background-color:chocolate;
position: relative;
}
#first{
background-color: burlywood;
position: absolute;
}
#second{
background-color: cornflowerblue;
position: absolute;
bottom: -90px;
}
#third{
background-color:darkcyan;
position: absolute;
bottom: -130px;
}
</style>
</head>
<body>
<div id="one">div1</div>
<div id="two">div2</div>
<div id="father">
<div id="first">第1个盒子</div>
<div id="second">第2个盒子</div>
<div id="third">第3个盒子</div>
</div>
</body>
</html>
扫一扫
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
