您的位置：首页 > 其它

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

2019-03-26 17:43 211 查看

绝对定位或者固定定位的元素可以用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的默认值。

结论

  1. 当上下左右四个属性都指定了的时候，元素的宽度和高度由定位相对的元素的宽度和高度以及上下左右四个属性所决定
  2. 当上下左右某个属性未指定的时候，该属性默认会获取所在方向上（水平或者垂直）所有的剩余空间，元素的宽度高度是指定的宽度高度或者由子元素决定
  3. 当上下两个属性指定的属性值之和大于相对的父元素时，其高度为0，对其宽度也有同样的结论
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航