0
点赞
收藏
分享

微信扫一扫

018绝对定位

一.知识点

定位:基于XXX定位,上下左右~

  1. 没有父级元素的情况下,相对于浏览器定位
  2. 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
  3. 在父级元素范围内移动

相对于父级或者浏览器的位置,进行指定的偏移,绝对位置的话,它不在标准文档流之中,原来的位置不会被保留

 

二.代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 600px;
}
div:nth-of-type(1){
width: 90px;
height: 90px;
background: #37d6aa;
position: absolute;/*绝对定位*/
right: 0;
bottom: 150px;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: blanchedalmond;
position: fixed;/*固定定位*/
right: 0;
bottom: 50px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

 

三.运行结果

 

018绝对定位_父级元素

 



举报

相关推荐

0 条评论