定位也是Css中一个非常强大的属性。定位主要是用来移动盒子，将其移动到我们想要的位置。

定位分为两部分

1、边偏移 left | right |top |bottom：偏移大小；（边偏移一般制定上就不指定下，指定左就不指定右）

2、定位模式 position :static| relative |absolute | fixed

（1）position :static默认值，使用static时 边偏移不起效果。常用于取消定位。

（2）position :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>Document</title>

    <style>

        /*  */

        .son1 {

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .son2 {

            width: 100px;

            height: 100px;

            background-color: pink;

            position: relative;

            left: 90px;

            top: 50px;

        }

        .son3 {

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son1">

        </div>

        <div class="son2">

        </div>

        <div class="son3">

        </div>

    </div>

</body>

</html>

显示结果为：

（3）position :absolute  绝对定位，相对于上一个已经定位的父元素进行定位 脱离标准流，与浮动类似完全不占位置

　　a、如果父亲没有定位，则以浏览器为准对齐，原位置不保留

<!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>Document</title>

    <style>

        /*  */

        .fa {

            width: 400px;

            height: 400px;

            background-color: aqua;

            margin: 0 auto;

        }

        .son1 {

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .son2 {

            width: 100px;

            height: 100px;

            background-color: pink;

            position: absolute;

            left: 90px;

            top: 50px;

        }

        .son3 {

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="fa">

        <div class="son1">

        </div>

        <div class="son2">

        </div>

        <div class="son3">

        </div>

    </div>

</body>

</html>

　　b、父亲有定位，则以最近的父亲元素为基准点对齐 （父亲可以是absolute也可以是relative） 一半来说子元素绝对定位，父元素相对定位即“子绝父相”

　　　　在上例中给.fa 样式增加 一个相对定位 即position: relative; 截个图变为：

　　　　

　　c、绝对定位 想要水平垂直居中，则先设置left50% 再设置自身宽度的一半 margin-left：-50px　　　

.son2 {

            width: 100px;

            height: 100px;

            background-color: pink;

            position: absolute;

            left: 50%;

            top: 50%;

            margin: -50px 0 0 -50px;

        }

　　将a中.son的样式改为如上所示代码，可以将.son2 改为水平居中，垂直居中，结果图如下

　　

（4）position :fixed 固定定位 相对于浏览器窗口进行定位,与父元素没有任何关系 。不占位置，不随滚动条滚动， 固定定位一定要写宽和高（除非有内容撑开盒子） 。

其他注意点：

1、在定位中，会产生层叠关系，设置层叠显示顺序使用z-index：1；数字越大优先级越高（只对定位元素（静态定位除外）产生效果）

如下例

<!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>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 200px;

            height: 200px;

            margin: 0;

        }

        div:first-child {

            background-color: aqua;

            z-index: 3;

        }

        div:nth-child(2) {

            background-color: red;

            position: absolute;

            left: 10px;

            top: 10px;

            z-index: 2;

        }

        div:last-child {

            background-color: pink;

            position: absolute;

            left: 20px;

            top: 20px;

            z-index: 1;

        }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

</body>

在有定位元素中设置z-index 数值高的 显示在最上面。

2、绝对定位和固定定位会将元素转换为行内块元素，因此设置绝对定位和固定定位后就不需要在转换模式了

CSS 小结笔记之定位的更多相关文章

  1. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  2. CSS 小结笔记之浮动

    在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...

  3. CSS学习笔记之定位

    position 有4中不同类型的定位,分别为static.relative.absolute.fixed 1.static 元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创 ...

  4. html+css学习笔记 4[定位]

    如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a ...

  5. CSS学习笔记：定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  6. CSS 小结笔记之图标字体（IconFont）

    本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...

  7. CSS 小结笔记之em

    1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...

  8. CSS 小结笔记之BFC

    BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...

  9. CSS 小结笔记之伸缩布局 (flex)

    CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...

随机推荐

  1. AbstractFactory抽象工厂模式(创建型模式)

    1.new 的问题 常见的对象创建方法: //创建一个Road对象 Road road=new Road(); new的问题:实现依赖,不能应对具体实例的变化 怎么理解上面这句话呢? 可以这样理解:我 ...

  2. java数据结构之(堆)栈

    (堆)栈概述栈是一种特殊的线性表,是操作受限的线性表栈的定义和特点•定义:限定仅在表尾进行插入或删除操作的线性表,表尾—栈顶,表头—栈底,不含元素的空表称空栈•特点:先进后出(FILO)或后进先出(L ...

  3. Java的注解相关的命令

    与注解处理器的有关的命令有5个,分别如下: (1)-XprintProcessorInfo 输出有关请求处理程序处理哪些注释的信息 (2)-XprintRounds 输出有关注释处理循环的信息 (3) ...

  4. Web服务(Apache、Nginx、Tomcat、Jetty)与应用(LAMP、CMS-WordPress&Ghost、Jenkins、Gitlab)

    Web服务和应用是目前信息技术领域的热门技术.如何使用Docker来运行常见的Web服务器(包括Apache.Nginx.Tomcat等),以及一些常用应用(LAMP.CMS等).包括具体的镜像构建方 ...

  5. spring中获取applicationContext(2)

    前几天写web项目的时候,用到了spring mvc. 但是又写bean.我要在代码里面生成,而这个bean里面,又有一些属性是通过spring注入的. 所以,只能通过ApplicationConte ...

  6. TCP连接、Http连接与Socket连接

    1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别”的网络之上. ...

  7. SpringBoot 初接触之 404

    1. 确认输入项目路径是否正确,如:http://localhost:8080/index,这里需要注意的是端口号的查看 2. 确认注解是否用对 在 Controller 层类上面使用的注解是 @Re ...

  8. C# 开发者审查代码的41条建议

    1. 确保没有任何警告(warnings). 2.如果先执行Code Analysis(启用所有Microsoft Rules)再消除所有警告就更好了. 3. 去掉所有没有用到的usings.编码过程 ...

  9. 微信开放平台Android应用的签名

    微信开放平台Android应用签名的本质便是我们签名文件keystore的MD5值. keytool -list -v -keystore qj_test.keystore 获得: 别名: naoli ...

  10. jquery判断日期是不是为空，是否大于前面的日期

    jquery判断日期是否为空,是否大于前面的日期,代码如下:方法一function onemonthtypeChange(){var startDate = $("#startDate&qu ...