相对定位:参考点 相对原来的位置

1.如果是一个单独的文档流盒子,及你姐设置了相对定位,和普通盒子一样

2.相对定位后,如果调整位置,会留下坑

作用:微调元素 子绝父相 提升层级

绝对定位 参考点:父盒子嵌套 如果父辈设置了相对定位,那么子盒子还是以父盒子的左上角为参考点

单个盒子设置绝对定位,如果以top描述,以页面左上角 bottom 右下

1.拖标

2.提升层级

一.

将绝对定位的盒子居中

left 50% margin-left:-宽度的一半

  1.  .father{
  2.      width: 100%;
  3.      height: 500px;
  4.      background: blue;
  5.      position: relative;
  6.  
  7.  }
  8.  .child{
  9.      width: 400px;
  10.      height: 100px;
  11.      background: red;
  12.      position: absolute;
  13.      left: 50%;
  14.      margin-left: -200px;
  15.  
  16.  }
  17.  *{
  18.      padding: 0;
  19.      margin: 0;
  20.  }
  21.  body{
  22.      font-size: 14px;
  23.  }
  24.  /*将表格默认的前面数字去掉 默认是存在的*/
  25.  ul{
  26.      list-style:none
  27.  }
  28.  /*将a超链接的默认下划线去掉*/
  29.  a{
  30.      text-decoration:none;
  31.  }
  32.  /*将输入框的默认框去掉*/
  33.  input{
  34.      border: 0;
  35.      outline: 0
  36.  ;
  37.  }

绝对定位居中盒子

二.固定定位

position :fixed;

脱离了标准文档

参考点 是以浏览器的左上角

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          *{
  8.              padding: 0;
  9.              margin: 0;
  10.          }
  11.          body{
  12.              padding-top: 80px;
  13.          }
  14.          .header{
  15.              width: 100%;
  16.              height: 80px;
  17.              background-color: red;
  18.              /*脱离了标准文档流*/
  19.  
  20.              /*参考点：是以浏览器的左上角*/
  21.              position: fixed;
  22.              top:0;
  23.              left: 0;
  24.              /*z-index: 10000;*/
  25.  
  26.          }
  27.          .active{
  28.              position: absolute;
  29.  
  30.          }
  31.      </style>
  32.  </head>
  33.  <body>
  34.  
  35.      <div class="header"></div>
  36.  
  37.      <p>alex1</p>
  38.      <p>alex2</p>
  39.      <p>alex3</p>
  40.      <p>alex4</p>
  41.  
  42.      <p>alex</p>
  43.      <p>alex</p>
  44.      <p>alex</p>
  45.      <p>alex</p>
  46.      <p>alex6</p>
  47.      <p>alex7</p>
  48.      <p>alex8</p>
  49.      <p>alex</p>
  50.      <p>alex</p>
  51.      <p>alex</p>
  52.      <p>alex</p>
  53.      <p>alex</p>
  54.      <p>alex</p>
  55.      <p>alex</p>
  56.      <p>alex</p>
  57.      <p>alex</p>
  58.      <p>alex</p>
  59.      <p>alex</p>
  60.      <p>alex</p>
  61.      <p>alex</p>
  62.      <p>alex</p>
  63.      <p>alex</p>
  64.      <p>alex</p>
  65.      <p>alex</p>
  66.      <p>alex</p>
  67.      <p>alex</p>
  68.      <p>alex</p>
  69.      <p>alex</p>
  70.      <p>alex</p>
  71.      <p>alex</p>
  72.      <p class="active">alex6666</p>
  73.      <p>alex</p>
  74.      <p>alex</p>
  75.          <p>alex5</p>
  76.      <p>alex2</p>
  77.      <p>alex3</p>
  78.      <p>alex4</p>
  79.      <p>alex5</p>
  80.      <p>alex6</p>
  81.      <p>alex7</p>
  82.      <p>alex8</p>
  83.      <p>alex</p>
  84.      <p>alex</p>
  85.      <p>alex</p>
  86.      <p>alex</p>
  87.      <p>alex</p>
  88.      <p>alex</p>
  89.      <p>alex</p>
  90.      <p>alex</p>
  91.      <p>alex</p>
  92.      <p>alex</p>
  93.      <p>alex2</p>
  94.      <p>alex3</p>
  95.      <p>alex4</p>
  96.      <p>alex5</p>
  97.      <p>alex6</p>
  98.      <p>alex7</p>
  99.      <p>alex8</p>
  100.      <p>alex</p>
  101.      <p>alex</p>
  102.      <p>alex</p>
  103.      <p>alex</p>
  104.      <p>alex</p>
  105.      <p>alex</p>
  106.      <p>alex</p>
  107.      <p>alex</p>
  108.      <p>alex</p>
  109.      <p>alex</p>
  110.      <p>alex</p>
  111.      <p>alex</p>
  112.      <p>alex</p>
  113.      <p>alex</p>
  114.      <p>alex</p>
  115.      <p>alex</p>
  116.      <p>alex</p>
  117.      <p>alex</p>
  118.      <p>alex</p>
  119.      <p>alex</p>
  120.      <p>alex</p>
  121.      <p>alex</p>
  122.      <p>alex</p>
  123.      <p>alex</p>
  124.      <p>alex</p>
  125.      <p>alex</p>
  126.      <p>alex</p>
  127.      <p>alex</p>
  128.      <p>alex</p>
  129.  
  130.  </body>
  131.  </html>

固定定位

这里含有z-index 作为权重

z-index 表示权重

1.z-index  表示谁压着谁 数值大的压上数值小的

2. 只有定位了元素 才能有z-index 绝对 相对  固定定位都有z-index 浮动元素没有

3.z-index没有单位 就是一个正整数,默认0 如果没有 或者数值相同

  1. 那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
    　　4.父亲怂了 儿子再厉害也没用
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style>
  7.          *{
  8.              padding: 0;
  9.              margin: 0;
  10.          }
  11.          .father1{
  12.              width: 300px;
  13.              height: 300px;
  14.              background-color: red;
  15.              position:relative;
  16.              z-index: 3;
  17.          }
  18.          .child1{
  19.              width: 100px;
  20.              height: 100px;
  21.              background-color: purple;
  22.              position: absolute;
  23.              top: 280px;
  24.              left: 350px;
  25.              z-index: 20;
  26.  
  27.          }
  28.          .father2{
  29.              width: 300px;
  30.              height: 300px;
  31.              background-color: green;
  32.              position:relative;
  33.              z-index: 2;
  34.          }
  35.          .child2{
  36.              width: 100px;
  37.              height: 100px;
  38.              background-color: yellow;
  39.              position: absolute;
  40.              top: 0;
  41.              left: 350px;
  42.              z-index: 21;
  43.          }
  44.      </style>
  45.  </head>
  46.  <body>
  47.      <div class="father1">
  48.          <div class="child1"></div>
  49.      </div>
  50.      <div class="father2">
  51.          <div class="child2"></div>
  52.      </div>
  53.  
  54.  </body>
  55.  </html>

z-index

css 最后的终章的更多相关文章

  1. BugPhobia终章篇章：学霸在线系统Beta阶段展示

    0x00 :序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet y ...

  2. C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.)

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 本系列,终 ...

  3. 史上最简单的 SpringCloud 教程 | 终章

    https://blog.csdn.net/forezp/article/details/70148833转载请标明出处:http://blog.csdn.net/forezp/article/det ...

  4. SpringBoot非官方教程 | 终章：文章汇总

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot-all/ 本文出自方志朋的博客 SpringBo ...

  5. JDBC终章- 使用 DBUtils实现增删查改- C3P0Utils数据源/QueryRunner runner连接数据源并执行sql

    JDBC终章- 使用 DBUtils实现增删查改 1.数据库结构 Create Table CREATE TABLE `user` ( `id` ) NOT NULL AUTO_INCREMENT, ...

  6. SpringCloud 教程 | 终章

    错过了这一篇,你可能再也学不会 Spring Cloud 了!Spring Boot做为下一代 web 框架,Spring Cloud 作为最新最火的微服务的翘楚,你还有什么理由拒绝.赶快上船吧,老船 ...

  7. BUAA-OO-第四单元总结——终章

    面向对象第四单元博客总结--终章 第四单元作业设计 第13次作业设计 类和对应方法属性设计 类设计如下图所示 本次作业主要涉及六个类,其中包括主类 Main ,通用Map类 UmlElementIdM ...

  8. 【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)

      第7章 CSS构造块   1.在样式表中添加注释 /*内容*/   2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...

  9. HTML与CSS入门——第二章 发布Web内容

    知识点: 1.使用文本编辑器创建一个基本的HTML文件的方法 2.使用FTP将文件传送到你的Web服务器的方法 3.文件在Web服务器上应该存储的位置 4.在没有Web服务器的情况下分发Web内容的方 ...

随机推荐

  1. pushgateway

    下载pushgateway wget https://github.com/prometheus/pushgateway/releases/download/v0.9.0/pushgateway-0. ...

  2. luoguP3979 遥远的国度

    换根的树剖 https://www.luogu.org/problem/P3979 题意: (出题人口活好.... 给定一棵以 root 为根的 n 个点的有根树,对于任意一个点 x, 给定他 的点权 ...

  3. CF358D Dima and Hares

    CF358D Dima and Hares 洛谷评测传送门 题目描述 Dima liked the present he got from Inna very much. He liked the p ...

  4. LG2495 「SDOI2011」消耗战 虚树

    问题描述 LG2495 题解 虚树 \(\mathrm{Code}\) #include<bits/stdc++.h> using namespace std; #define int l ...

  5. Luogu P5022 旅行

    开始写复赛题了 先放张图纪念我惨烈的卡常之路 不说了,简直悲伤 题目链接 思路么..不想写了 Code //不要在意四十行超级加速,卡常用的 #include<bits/stdc++.h> ...

  6. 如果对象的引用被置为null，；垃圾回收器是否会立即释放对象占用的内存？

    不会,在下一个垃圾回调周期中,这个对象将是被可回收的. 也就是说并不会立即被垃圾收集器立刻回收,而是在下一次垃圾回收时才会释放其占用的内存.

  7. JQuery插件 aos.js-添加动画效果

    原文地址:http://www.mamicode.com/info-detail-1785357.html 简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页 ...

  8. 『珂朵莉树 Old Driver Tree』

    珂朵莉树 珂朵莉树其实不是树,只是一个借助平衡树实现的数据结构,主要是对于有区间赋值的数据结构题,可以用很暴力的代码很高效地完成任务,当然这是建立在数据随机的基础上的. 即使数据不是随机的,写一个珂朵 ...

  9. 车位iou计算

    车位检测中,判断多帧图像检测出的车位是否是同一个车位.计算其IOU. 判断一个点是否在一个四边形内 Approach : Let the coordinates of four corners be ...

  10. 利用 Symbol Type Viewer 工具实现将 pdb 文件 转换为 c\c++ 头文件

    利用 Symbol Type Viewer 工具实现将 pdb 文件 转换为 c\c++ 头文件 一.得到符号 二.将符号转换为 .h 文件 三.得到 c\c++ 头文件,之后编程时直接导入这个文件即 ...