一、position属性

1、relative（相对定位）

  • 相对它原来的位置，通过指定偏移，到达新的位置。
  • 扔在标准流中，它对父级盒子和相邻的盒子都没有任何影响。

看下面的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style type="text/css">

      .box1,.box2,.box3{

         width: 100px;

         height: 100px;

      }

      .box1{

        background-color: red;

      }

      .box2{

        background-color:blue;

      }

      .box3{

        background-color: yellow;

      }

    </style>

</head>

<body>

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

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

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

    <div class="box3"></div>

</body>

</html>

效果：

然后分别给第一个和第二个盒子添加定位：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>相对定位</title>

    <style type="text/css">

      .box1,.box2,.box3{

         width: 100px;

         height: 100px;

      }

      .box1{

        background-color: red;

        position: relative;

        left: 100px;

      }

      .box2{

        background-color:blue;

        position: relative;

        left: 100px;

        top: 50px;

      }

      .box3{

        background-color: yellow;

      }

    </style>

</head>

<body>

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

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

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

    <div class="box3"></div>

</body>

</html>

效果：

观察上面的截图会发现：第一个和第二个盒子分别相对于原来的位置进行了偏移，但是对父级盒子和相邻的盒子都没有影响。

2、absolute（绝对定位）

  • 相对已设定非static定位属性的父元素计算偏移量，脱离文档流。

看下面的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>绝对定位</title>

    <style type="text/css">

      .box1,.box2,.box3{

         width: 100px;

         height: 100px;

      }

      .box1{

        background-color: red;

        position: relative;

        left: 100px;

      }

      .box2{

        background-color:blue;

        position: absolute;

        left: 100px;

        top: 50px;

      }

      .box3{

        background-color: yellow;

        width: 120px;

      }

    </style>

</head>

<body>

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

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

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

    <div class="box3"></div>

</body>

</html>

效果：

观察上面的截图可以发现：absolute定位是脱离文档流的，是相对于父元素进行偏移。

3、fixed（相对浏览器固定定位，IE6不支持）

看下面的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>fixed</title>

    <style type="text/css">

      .box1,.box2,.box3{

         width: 100px;

         height: 100px;

      }

      .box1{

        background-color: red;

        position: relative;

        left: 100px;

      }

      .box2{

        background-color:blue;

        position: absolute;

        left: 100px;

        top: 50px;

      }

      .box3{

        background-color: yellow;

        width: 120px;

        position: fixed;

        left: 100px;

        top: 200px;

      }

    </style>

</head>

<body>

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

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

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

    <div class="box3"></div>

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br />

</body>

</html>

效果：

上下移动滚动条的时候你会发现，第三个盒子的位置不会随着滚动条的滚动而上下移动，相对于浏览器是固定的。

4、static（默认）

  • 偏移量设置
  • X轴（left、right属性）与Y轴（top、bottom属性）
  • 可取值：像素或百分比。

5、定位图解

6、Z-Index

Z-Index用来设置定位盒子的层级

  • 数字越大层级越高，越在上层。

例如：Z-Index：2；

注意：

  • 数字之后没有单位。
  • 数字可以设置为负值。

看下面的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>绝对定位</title>

    <style type="text/css">

      .box1,.box2,.box3{

         width: 100px;

         height: 100px;

      }

      .box1{

        background-color: red;

        position: relative;

        left: 100px;

      }

      .box2{

        background-color:blue;

        position: absolute;

        left: 100px;

        top: 50px;

      }

      .box3{

        background-color: yellow;

        width: 120px;

      }

    </style>

</head>

<body>

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

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

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

    <div class="box3"></div>

</body>

</html>

效果：

现在给box1添加层级：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>绝对定位</title>

    <style type="text/css">

      .box1,.box2,.box3{

         width: 100px;

         height: 100px;

      }

      .box1{

        background-color: red;

        position: relative;

        left: 100px;

        z-index: 1;

      }

      .box2{

        background-color:blue;

        position: absolute;

        left: 100px;

        top: 50px;

      }

      .box3{

        background-color: yellow;

        width: 120px;

      }

    </style>

</head>

<body>

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

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

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

    <div class="box3"></div>

</body>

</html>

效果：

这时box1就会在box2上面。

也可以给box2添加层级：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>绝对定位</title>

    <style type="text/css">

      .box1,.box2,.box3{

         width: 100px;

         height: 100px;

      }

      .box1{

        background-color: red;

        position: relative;

        left: 100px;

        /* z-index: 1; 添加层级 */

      }

      .box2{

        background-color:blue;

        position: absolute;

        left: 100px;

        top: 50px;

        z-index: -2;/*添加负数的层级*/

      }

      .box3{

        background-color: yellow;

        width: 120px;

      }

    </style>

</head>

<body>

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

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

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

    <div class="box3"></div>

</body>

</html>

效果：

实例：

实现网页横幅的效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>定位基本应用</title>

    <style type="text/css">

      #adverImg{

          width: 426px;

          height: 130px;/*和图片的宽度和高度一致*/

          position: relative;/*父元素添加相对定位*/

          border: 1px solid red;

      }

      #number{

          position: absolute;

          right: 5px;

          bottom: -10px;

      }

      /*li标签设置样式,使用后代选择器*/

      #number li{

          list-style: none;/*设置li标签样式：不显示前面的圆点*/

          float: left; /*设置浮动：使li标签在一行显示*/

          width: 20px;

          height: 20px;

          border: 1px solid #666666;/*设置边框*/

          margin-left: 5px;/*设置向左的外边距，使每个li标签之间有空格*/

          text-align: center;/*设置文字水平方向居中*/

          line-height: 20px;/*设置文字垂直方向居中*/

          /* color: white; */

          cursor: pointer;/*设置鼠标移动到li标签时显示小手的形状*/

          background-color: white;

      }

    </style>

</head>

<body>

    <div id="adverImg">

        <img src="data:images/adver-01.jpg" alt="商品促销" />

        <ul id="number">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </div>

</body>

</html>

效果：

CSS（八）：定位属性的更多相关文章

  1. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  2. CSS Position 定位属性

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

  3. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  4. CSS position定位属性

    css中的position属性是用于设置元素位置的定位方式 它有以下几种取值: static:默认定位方式,子容器在父容器中按照默认顺序进行摆放 absolute:绝对定位,元素不占据父容器空间,相当 ...

  5. CSS的定位属性实现text-shadow属性的文本下产生阴影效果

    只要先理解text-shadow的原理,就能用定位元素进行效果的模仿. text-shadow: h-shadiv v-shadov blur color h-shadv为文本水平移动的距离,正值相对 ...

  6. CSS属性：定位属性（图文详解）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...

  7. css中的定位属性position（转）

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  8. css 08-CSS属性：定位属性

    08-CSS属性:定位属性 CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. position: absolute; <!-- 绝对定位 --> position: relat ...

  9. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

随机推荐

  1. java打印条形码Code128C

    生成编码类型为Code128C的条形码的javaCODE: package test; import java.awt.Color; import java.awt.Graphics; import ...

  2. 华中科技大学 ubuntu14.04源

    deb http://mirrors.hust.edu.cn/ubuntu/ trusty main restricteddeb-src http://mirrors.hust.edu.cn/ubun ...

  3. memcached（一）：linux下memcached安装以及启动

    一. 安装文件 Linux系统安装memcached,首先要先安装libevent库. 下载memcached与libevent的安装文件 http://memcached.org/files/mem ...

  4. Install OpenCV3.0 on Eclipse

     Neste artigo veremos como usar o OpenCV com Eclipse. Usaremos as versões mais recentes:OpenCV 3.0 ...

  5. 谷歌IP地址

    http://www.yuxiaoxi.com/2014-06-11-google-meet-you.html

  6. mybatis 对象关系映射例子

    入门 http://legend2011.blog.51cto.com/3018495/908956 增删改 http://legend2011.blog.51cto.com/3018495/9130 ...

  7. 使用flow捕获js错误提高代码质量

    本文将介绍Flow及其主特性.下面分别从如何安装设置,如何添加类型注释,如何在运行时自动去掉注释等方面来介绍. 安装 目前Flow兼容的操作系统有Mac OS X,Linux(64位),Windows ...

  8. Golang 新手可能会踩的 50 个坑

    前言 Go 是一门简单有趣的编程语言,与其他语言一样,在使用时不免会遇到很多坑,不过它们大多不是 Go 本身的设计缺陷.如果你刚从其他语言转到 Go,那这篇文章里的坑多半会踩到. 如果花时间学习官方 ...

  9. mongoose更新文档的时候让某个字段自增

    Station.update({ _id: req.params.id }, { $set: req.body, $inc: { count: 1 } }, { multi: false }, cal ...

  10. CCZone

    /**************************************************************************** Copyright (c) 2010 coc ...