zoukankan      html  css  js  c++  java
  • 关于position的用法

    昨天发现的一个问题:

    因为做的是移动端前端开发,使用的apicloud技术,发现普通的打开一个frame,出现一个问题,frame是可以滚动的,当然这个可以设置,但是我的内容是不确定的,所以必须要求他可以滚动,但是有个需求是将两个按钮设置到frame的底部。

    我考虑过使用绝对布局,但是使用后发现不起作用,后来请教别人发现了一个从未用过但是见过的属性,就是position: fixed; 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;
    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。

  • 相关阅读:
    (转)OpenGL和D3D
    (转)海岸线提取完成, 海浪排岸效果
    (转)perlin噪声函数
    D3D 部分功能测试结论
    (转)学习directx遇到的问题
    D3D Lock Pool
    D3D渲染到纹理
    用Eclipse平台进行c/c++开发
    var读写和function读写,get/set读写效率比较
    flash fps游戏 fps多少为佳
  • 原文地址:https://www.cnblogs.com/zlj1027/p/5738223.html
Copyright © 2011-2022 走看看