position:absolute和position:fixed元素位置和宽度高度的问题

最新推荐文章于 2024-07-01 16:02:19 发布

Bright's Dream

最新推荐文章于 2024-07-01 16:02:19 发布

阅读量4.3k

点赞数 1

分类专栏：前端 css

本文链接：https://blog.csdn.net/weixin_37994110/article/details/88825904

版权

前端同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

绝对定位或者固定定位的元素可以用left、right、top、bottom四个属性指定，那么这四个属性与元素所处的位置还有元素的宽度和高度有什么关系呢？

left、right、top、bottom四个属性全部指定

代码如下：
html和css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    main {
      position: fixed;
      left: 0;
      right: 100px;
      top: 100px;
      bottom: 100px;
      background-color: gray;
    }
  </style>
</head>
<body>
  <main>
    <article style="width:100px"></article>
  </main>
</body>
</html>

结果如下图：
效果图
可以看到元素的上下左右边界所处的位置分别由四个属性指定，宽度和高度是父元素的宽度和高度减去四个属性。

只指定right、top、bottom

main {
      position: fixed;
    
      right: 100px;
      top: 100px;
      bottom: 100px;
      background-color: gray;
    }

得到的效果如下图：
在这里插入图片描述
我们可以发现，元素的宽度是100px，也就是左边的所有剩余空间都被分配到了left上，我们可以假定这是left的默认值。

结论

当上下左右四个属性都指定了的时候，元素的宽度和高度由定位相对的元素的宽度和高度以及上下左右四个属性所决定
当上下左右某个属性未指定的时候，该属性默认会获取所在方向上（水平或者垂直）所有的剩余空间，元素的宽度高度是指定的宽度高度或者由子元素决定
当上下两个属性指定的属性值之和大于相对的父元素时，其高度为0，对其宽度也有同样的结论

Bright's Dream

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
position:absolute和position:fixed元素位置和宽度高度的问题

绝对定位或者固定定位的元素可以用left、right、top、bottom四个属性指定，那么这四个属性与元素所处的位置还有元素的宽度和高度有什么关系呢？left、right、top、bottom四个属性全部指定代码如下：html和css<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫

专栏目录