绝对定位和固定定位

最新推荐文章于 2023-10-21 09:42:12 发布

XY最右

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量310

点赞数

文章标签： css

本文链接：https://blog.csdn.net/XYzuiyou/article/details/116718760

版权

绝对定位

在这里插入图片描述

我们在#L2里面输入position:absolute；

绝对定位

然后我们浏览器打开一下

在这里插入图片描述

就会发现第二个红框偏移了，并且父级红色边框缩小了

我们删掉

position:absolute；

试一下看看

在这里插入图片描述

就会发现又恢复正常了

在这里插入图片描述

我们在给他添加一个数值

在这里插入图片描述

注意

那么问题来了，

第二个是相对谁来偏移的

是红色的父级边框吗？还是浏览器边缘

在这里插入图片描述

我们给红色的父级边框添加一个position:relative 相对定位

这样父级红色边框就是定位了，但是由于没有给他添加数值，所以他还是保持不动，但是他是被定位了

在这里插入图片描述

然后我们浏览器打开一下就会发现，第二个又往右边偏移了一点距离

说明在红色父级边框没有添加position:relative 的时候，是以相对浏览器边框来定位的

添加后，是相对红色父级边框来定位的

绝对定位总结

定位:基于XXX定位，上下左右

没有父级元素定位的前提下，相对于浏览器边框定位
父级元素存在定位，会相对于父级定位偏移
在父级元素范围内偏移

重点

相对于父级或者浏览器边框的位置，进行指定的位置偏移，绝对定位后，他不在标准文档流中，原来的位置不会被保留，将会被顶替掉

固定定位

我们在html中输入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
  body{
    height: 1000px;
  }
  div:nth-of-type(1){  /*绝对定位:相对于浏览器*/
    width: 100px;
    height: 100px;
  background: red;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  div:nth-of-type(2){ /*fixed 固定定位*/
    width: 50px;
    height: 50px;
    background: yellow;
    position: fixed;
    right: 0px;
      bottom: 0;
  }
</style>

</head>
<body>
<div>div1</div>
<div>div2</div>

</body>
</html>

浏览器打开一下

在这里插入图片描述

就会发现浏览器下面有2个方框

我们滚轮往下滑看一下

在这里插入图片描述

就会发现只有红色方框动了，而黄色方框还是在原来的位置

XY最右

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绝对定位和固定定位

绝对定位我们在#L2里面输入position:absolute；绝对定位然后我们浏览器打开一下就会发现第二个红框偏移了，并且父级红色边框缩小了我们删掉position:absolute；试一下看看就会发现又恢复正常了我们在给他添加一个数值注意那么问题来了，第二个是相对谁来偏移的是红色的父级边框吗？还是浏览器边缘我们给红色的父级边框添加一个position:relative 相对定位这样父级红色边框就是定位了，但是由于没有给他添加数值，所以他还是保持
复制链接

扫一扫