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。

  • 相关阅读:
    Hacker's guide to Neural Networks
    Backbone Collection 源码简谈
    Backbone Model 源码简谈 (版本:1.1.0 基础部分完毕)
    Android系统架构概述
    关于 Android 程序员最近的状况
    调查:周末iPhone用户喜欢出去玩 Android喜欢宅家看电影/看书
    调查:周末iPhone用户喜欢出去玩 Android喜欢宅家看电影/看书
    Android进阶必学retrofit源码解析
    Android进阶必学retrofit源码解析
    移动互联网资料图
  • 原文地址:https://www.cnblogs.com/zlj1027/p/5738223.html
Copyright © 2011-2022 走看看