昨天发现的一个问题：
因为做的是移动端前端开发，使用的apicloud技术，发现普通的打开一个frame，出现一个问题，frame是可以滚动的，当然这个可以设置，但是我的内容是不确定的，所以必须要求他可以滚动，但是有个需求是将两个按钮设置到frame的底部。
我考虑过使用绝对布局，但是使用后发现不起作用，后来请教别人发现了一个从未用过但是见过的属性，就是position: fixed;width: 100%;bottom: 20px;
后来了解了他的用法知道了他是相对于body的。
常用的position的值是relative和absolute，自己也是懵懂的，后来百度也试过很多，现在谢谢自己现在的理解，以后用的多了，再补充进来。
先来个最简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>云API</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
<style>
.div1{
position: relative;
height: 100px;
width: 100px;
background-color: #039BE5;
margin-left: 80px;
margin-top: 60px;
}
.div2{
position: absolute;
width: 30px;
height: 30px;
background-color: darkcyan;
top: 20px;
left: 20px;
}
.div3{
position: absolute;
width: 80px;
height: 80px;
opacity: 0.5;
background-color: hotpink;
top: 10px;
left: 10px;
}
.div4{
position: relative;
width: 80px;
height: 80px;
opacity: 0.8;
background-color: aquamarine;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div class="div1">
div1
<div class="div2">
div2
</div>
</div>
<div class="div3">
div3
</div>
<div class="div4">
我是div4
</div>
</body> </html>
解释：
以上div3 是单独的元素，他的直接父元素是body，他的绝对定位就是相对body的，
div2 的直接父元素是div1，这种情况下，只有把div1设置为relative，div2 的absolute 才会是相对于div1的，也就是说，div2会跟着div1动。
也证明了div一旦设置为absolute，他就会脱离文档流，即和普通的div不在同一个平面[我觉得可以这样理解]。所以可以覆盖别的div。
时间： 2024-10-15 03:08:06