关于position的用法

最新推荐文章于 2021-05-18 15:41:11 发布

dise0225

最新推荐文章于 2021-05-18 15:41:11 发布

阅读量586

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/zlj1027/p/5738223.html

版权

昨天发现的一个问题：

因为做的是移动端前端开发，使用的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。

转载于:https://www.cnblogs.com/zlj1027/p/5738223.html

dise0225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于position的用法

昨天发现的一个问题：因为做的是移动端前端开发，使用的apicloud技术，发现普通的打开一个frame，出现一个问题，frame是可以滚动的，当然这个可以设置，但是我的内容是不确定的，所以必须要求他可以滚动，但是有个需求是将两个按钮设置到frame的底部。我考虑过使用绝对布局，但是使用后发现不起作用，后来请教别人发现了一个从未用过但是见过的属性，就是position: fixed...
复制链接

扫一扫