概述：

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        /*

            position 定位

            static 静态定位（没有定位），默认

            relative 相对定位，相对于正常位置(原来没定位之前的位置)进行定位，还要占据位置

            absolute 绝对定位，没有占据位置，使元素完全脱离文档流

                     没有定位父级，则相对于整个文档发生偏移

                     参考最近非static定位的父级进行定位

            fixed    固定定位，相对于浏览器窗口进行定位

            方向词

                left

                right

                top

                bottom

            z-index 规定定位的层级（默认0）

                值：number 值越大层级越高

         */

        div{

            width: 100px;

            height: 100px;

            background: aqua;

            /*margin: 50px auto;*/

        }

        .box1{

            position: relative;

            top: 20px;

            background: aquamarine;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

</html>

绝对定位：

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box1{

            width: 100px;

            height: 100px;

            background: aqua;

            position: absolute;

            top: 100px;

            left: 50px;

        }

        .box2{

            width: 200px;

            height: 200px;

            background: antiquewhite;

            margin: auto;

            position: relative;

        }

        #box{

            width: 500px;

            height: 500px;

            background: black;

            margin: 50px auto;

            position: relative;

        }

    </style>

</head>

<body>

    <div id="box">

        <div class="box2">

            <div class="box1"></div>

        </div>

    </div>

</body>

</html>

html-定位的更多相关文章

  1. Fis3的前端工程化之路[三大特性篇之资源定位]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  2. iPhone Anywehre虚拟定位提示“后台服务未启动，请重新安装应用后使用”的解决方法

    问题描述: iPhone越狱了,之后在Cydia中安装Anywhere虚拟定位,但是打开app提示:后台服务未启动,请重新安装应用后使用. 程序无法正常使用... 解决方法: 打开Cydia-已安装, ...

  3. 网站定位之---根据IP获得区域

    记得以前做一个培训机构网站时候需要定位,那时候用的搜狐的api,不是很精准. demo:https://github.com/dunitian/LoTCodeBase/tree/master/NetC ...

  4. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  5. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  6. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

  7. 如何定位Oracle数据库被锁阻塞会话的根源

    首先再次明确下,数据库因为要同时保证数据的并发性和一致性,所以操作有锁等待是正常的. 只有那些长时间没有提交或回滚的事物,阻塞了其他业务正常操作,才是需要去定位处理的. 1.单实例环境 2.RAC环境 ...

  8. iOS开发系列--地图与定位

    概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一个 ...

  9. 企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  10. 【初探Spring】------Spring IOC（三）：初始化过程---Resource定位

    我们知道Spring的IoC起到了一个容器的作用,其中装得都是各种各样的Bean.同时在我们刚刚开始学习Spring的时候都是通过xml文件来定义Bean,Spring会某种方式加载这些xml文件,然 ...

随机推荐

  1. 5)django-模板

    django模板显示页面 一:语法使用 1)变量:{{变量名}}         2)for循环            {% for row in userlist%}                 ...

  2. Idea 调试快捷键

    F9            resume programe 恢复程序 Alt+F10       show execution point 显示执行断点 F8            Step Over ...

  3. FTP判断ftp上是否有文件目录，没有就创建的具体案例

    /// <summary> /// 判断ftp上是否有指定的文件目录,没有创建 /// </summary> /// <param name="ftpPath& ...

  4. ios 逆向编程（环境搭建）

    首先如果你想要逆向其他的APP 动态的查看 或者修改人家APP里面的东西 1, 首先要有一台越狱的手机 最好是9.1以下的,因为9.2以上(包括9.2)就不能完美越狱了 2,手机也要5s以上的(因为从 ...

  5. Java的家庭记账本程序（B）

    日期:2019.2.3 博客期:029 星期日 看看今天想先完成jsp的连接操作,所以首先意识到自己的程序中,管理员可以对成员进行冻结.解封操作,所以先回去补了一下数据库的内容!成员的内容里多了一项i ...

  6. CentOS 7 安装JDK环境

    1.JDK下载地址:https://www.oracle.com/technetwork/java/javase/downloads/java-archive-javase8-2177648.html ...

  7. laravel 关联查询

  8. 51nod1158 最大子矩形 单调栈应用

    #include<iostream> #include<cstring> #include<cstdio> using namespace std; ][6],m, ...

  9. 论文阅读笔记十：DeepLab: Semantic Image Segmentation with Deep Convolutional Nets, Atrous Convolution, and Fully Connected CRFs (DeepLabv2)(CVPR2016)

    论文链接:https://arxiv.org/pdf/1606.00915.pdf 摘要 该文主要对基于深度学习的分割任务做了三个贡献,(1)使用空洞卷积来进行上采样来进行密集的预测任务.空洞卷积可以 ...

  10. python项目实战三个小实例

    1.   让用户输入圆的半径,告诉用户圆的面积: import math while True:     # 用户输入     r = input("请输入圆的半径:")     ...