#转载请先留言联系

  • 定位

HTML中的position属性可以对元素进行定位，通过position的不同的值，可以配合方位属性，让元素显示页面中的任何一个位置。

position有四个值：

static，默认值，去除元素的定位。也就是不进行定位

relative，相对定位，元素相对于自身原来的位置进行定位。

absolute，绝对定位，元素相对于当前父元素进行定位。

fixed，固定定位，元素相对于浏览器页面窗口进行定位。

怎么定位？css中提供了四个不同方位属性给我们进行定位。

top：表示距离顶部指定的长度

bottom:表示距离底部指定的长度

left：表示距离左边指定的长度

right：表示距离右边指定的长度

示例：

1.relative定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width:200px;

            height: 200px;

            background: #000;

            position: relative;

            /*让元素相对于自身原有的位置进行定位*/

            top:100px; /*向下移动100px*/

            left: 100px; /*向左移动100px*/

            /*定位中，left与right,top与bottom一般不同时使用*/

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>;

2.absolute定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 500px;

            height: 500px;

            background: blue;

            position: absolute;

            top: 100px;

            left: 100px;

        }

        .son{

            width: 100px;

            height: 100px;

            background: black;

            position: absolute;

            top: 200px;

            left: 200px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="son"></div>

    </div>

</body>

</html>

absolute定位有一个很常用的用途，就是当希望子元素在父元素的正中央时，可以这样操作：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 500px;

            height: 500px;

            background: blue;

            position: absolute;

            top: 100px;

            left: 100px;

        }

        .son{

            width: 100px;

            height: 100px;

            background: black;

            position: absolute;

            left: 0;  /* 注意不要漏了上下左右为0，否则不会成功 */

            right: 0;

            top: 0;

            bottom: 0;

            margin: auto;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="son"></div>

    </div>

</body>

</html>

3.fixed定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .one{

            width: 100px;

            height: 300px;

            background: blue;

            position: fixed;

            right: 0;

            top: 300px;

        }

        .two{

            width: 100px;

            height: 300px;

            background: blue;

            position: fixed;

            left: 0;

            top: 300px;

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

</body>

</html>

设置了定位后可以设置层级。

  • 层级

通过z-index进行设置，所有的元素的z-index默认值为0，我们可以通过z-index，设置不同的值来控制定位元素之间的覆盖。值越大的，层级越高，值越小，层级就越低，如果定位元素的层级为-1，则会被普通没有定位的元素进行覆盖。

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .one{

            width: 100px;

            height: 200px;

            background: red;

            position: absolute;

        }

        .two{

            width: 100px;

            height: 100px;

            background: yellow;

            position: absolute;

            z-index: 1;

        }

        .three{

            width: 100px;

            height: 300px;

            background: blue;

            position: absolute;

            z-index: -2;

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

</body>

</html>

html中的定位与层级设置的更多相关文章

  1. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  2. 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)

    物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)   2015年11月14日|    by: nbboy|    Category: 系统设计, 缓存设计, 高性能系统 摘要 ...

  3. angularjs中的页面访问权限设置

    11月在赶一个项目,这阵子比较忙,挤挤时间更一篇博客吧,如标题所述说说在ng中页面访问权限控制的问题,水平有限各位看官见谅: 在以往的项目中,前后端常见的配合方式是前端提供页面和ui加一点DuangD ...

  4. jQuery ZeroClipboard中Flash定位不准确的解决方案

    转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...

  5. css中的定位

    上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位  position:static;   ...

  6. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  7. 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  8. MySQL 5.7中如何定位DDL被阻塞的问题

    在上篇文章<MySQL表结构变更,不可不知的Metadata Lock>中,我们介绍了MDL引入的背景,及基本概念,从“道”的层面知道了什么是MDL.下面就从“术”的层面看看如何定位MDL ...

  9. 【基础】selenium中元素定位的常用方法（三）

    一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...

随机推荐

  1. PyQt5图像全屏显示

    Windows装这个:https://pypi.python.org/pypi/PyQt5Ubuntu输入这个:sudo apt-get install python3-pyqt5 或者直接输入:pi ...

  2. PHP整数取余返回负数解决办法

    <?php $num1 = 1494313163777; $num2 = 9999; //直接计算取余会出错,出现负数 -8779 //echo $num1 % $num2;exit; //算上 ...

  3. 【WebService】——契约优先

    相关博客: [WebService]--入门实例 [WebService]--SOAP.WSDL和UDDI 前言: 我们先来看一个契约优先的开发实例,通过熟悉他的开发流程,最后再和代码优先的方式进行比 ...

  4. WebKit资源加载和网络栈

    webkit笔记,主要来自 朱永盛 <WebKit技术内幕> 学习笔记,转载就注明原著,该书是国内仅有的Webkit内核的书籍,学习的好导师,推荐有兴趣的朋友可以购买 WebKit资源加载 ...

  5. 全局 Ajax 事件处理器

    jQuery中将Ajax请求和响应分成了若干(5)个阶段 并且允许开发者在Ajax请求和响应的不同阶处理不同的逻辑, 这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后 ...

  6. ElasticSearch1.7.1拼音插件elasticsearch-analysis-pinyin-1.3.3使用介绍

    ElasticSearch拼音插件elasticsearch-analysis-pinyin使用介绍 https://my.oschina.net/xiaohui249/blog/214505 摘要: ...

  7. wmic的用法

    原始文章链接:http://blog.sina.com.cn/s/blog_5fb265c70100w4d0.html 一.wmic的基本命令格式简析 经常看网上的相关资料的话,读者可能会对wmic有 ...

  8. clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight

    clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...

  9. Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition) C （用map 超时）

    C. Bear and Colors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  10. linux之scp命令

    linux之cp/scp命令+scp命令详解   名称:cp 使用权限:所有使用者 使用方式: cp [options] source dest cp [options] source... dire ...