css - absolute 相对谁定位?
本文介绍了css - absolute 相对谁定位?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
很多资料都说 absolute 相对第一个非static父元素定位,如果没有就想对body。
写个demo,发现好像不是那么回事啊。
<!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>
html {
width: 80%;
height: 100%;
background-color: teal;
}
body {
width: 50%;
height: 100%;
background-color: #ccc;
}
.box {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">absolute</div>
</body>
</html>
虽然文档在Firefox, safari, chrome效果不一样。
但可以看出绝对不是相对body,html来定位啊,还有肯定也不像fixed相对视口。
难道有什么不为人知的秘密?有比html级别更高的吗?
解决方案
1.绝对定位元素是相对于它的包含块.
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block.
2.包含块的定义见下图:
3.将.box的定位改为bottom:0而不是top: 0;查看右下角的边界,截图如下:
可见该元素就是相对于视窗的大小在进行定位。
这篇关于css - absolute 相对谁定位?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文