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

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

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

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

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

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

1.拖标

2.提升层级

一.

将绝对定位的盒子居中

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

 .father{

     width: 100%;

     height: 500px;

     background: blue;

     position: relative;

 }

 .child{

     width: 400px;

     height: 100px;

     background: red;

     position: absolute;

     left: 50%;

     margin-left: -200px;

 }

 *{

     padding: 0;

     margin: 0;

 }

 body{

     font-size: 14px;

 }

 /*将表格默认的前面数字去掉 默认是存在的*/

 ul{

     list-style:none

 }

 /*将a超链接的默认下划线去掉*/

 a{

     text-decoration:none;

 }

 /*将输入框的默认框去掉*/

 input{

     border: 0;

     outline: 0

 ;

 }

绝对定位居中盒子

二.固定定位

position :fixed;

脱离了标准文档

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         body{

             padding-top: 80px;

         }

         .header{

             width: 100%;

             height: 80px;

             background-color: red;

             /*脱离了标准文档流*/

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

             position: fixed;

             top:0;

             left: 0;

             /*z-index: 10000;*/

         }

         .active{

             position: absolute;

         }

     </style>

 </head>

 <body>

     <div class="header"></div>

     <p>alex1</p>

     <p>alex2</p>

     <p>alex3</p>

     <p>alex4</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex6</p>

     <p>alex7</p>

     <p>alex8</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p class="active">alex6666</p>

     <p>alex</p>

     <p>alex</p>

         <p>alex5</p>

     <p>alex2</p>

     <p>alex3</p>

     <p>alex4</p>

     <p>alex5</p>

     <p>alex6</p>

     <p>alex7</p>

     <p>alex8</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex2</p>

     <p>alex3</p>

     <p>alex4</p>

     <p>alex5</p>

     <p>alex6</p>

     <p>alex7</p>

     <p>alex8</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

     <p>alex</p>

 </body>

 </html>

固定定位

这里含有z-index 作为权重

z-index 表示权重

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

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

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

那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
　　4.父亲怂了 儿子再厉害也没用
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         .father1{

             width: 300px;

             height: 300px;

             background-color: red;

             position:relative;

             z-index: 3;

         }

         .child1{

             width: 100px;

             height: 100px;

             background-color: purple;

             position: absolute;

             top: 280px;

             left: 350px;

             z-index: 20;

         }

         .father2{

             width: 300px;

             height: 300px;

             background-color: green;

             position:relative;

             z-index: 2;

         }

         .child2{

             width: 100px;

             height: 100px;

             background-color: yellow;

             position: absolute;

             top: 0;

             left: 350px;

             z-index: 21;

         }

     </style>

 </head>

 <body>

     <div class="father1">

         <div class="child1"></div>

     </div>

     <div class="father2">

         <div class="child2"></div>

     </div>

 </body>

 </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. Kvm命令集管理虚拟机

    KVM虚拟机配置文件位置 [root@localhost ~]# ll /etc/libvirt/qemu/ 总用量 drwxr-xr-x root root 12月 : autostart drwx ...

  2. [C3] Andrew Ng - Neural Networks and Deep Learning

    About this Course If you want to break into cutting-edge AI, this course will help you do so. Deep l ...

  3. SpringMVC其他说明（六）

    1. 编码问题 在web.xml中配置过滤器: <!-- 源码:spring-web.jar 功能:字符集过滤器,设置编码集为UTF-8,解决POST的中文乱码问题. 参数说明: encodin ...

  4. 《RocketMQ》

    作为一款消息中间件,RocketMQ需要解决的技术问题其实在分布式系统领域中都有所体现.首先如果将分布式系统的领域按照分布式通信.分布式存储.分布式计算以及分布式管理这四大部分进行划分,其实就会发现在 ...

  5. luoguP4094 [HEOI2016/TJOI2016]字符串

    题意 考虑二分答案\(mid\),现在我们要判断\(s[c...c+mid-1]\)是否在\(s[a...b]\)出现过. 首先找到\(s[c...c+mid-1]\)所在的状态: 建出\(paren ...

  6. 【Excel】创建目录

    1.=INDEX(GET.WORKBOOK(1),ROW(A1))&T(NOW()) 2. =IFERROR(HYPERLINK(我的目录&"!A1",MID(我的 ...

  7. cmake打印shell

    cmake链接库失败时,可通过打印路径下对应的lib来定位问题 execute_process(COMMAND ls -lt ${CMAKE_CURRENT_SOURCE_DIR}/lib #执行sh ...

  8. 【大数据】SparkSql 连接查询中的谓词下推处理 (一)

    本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/YPN85WBNcnhk8xKjTPTa2g 作者:李勇 目录: 1.SparkSql 2.连接查询和 ...

  9. Python 线程池(小节)

    Python 线程池(小节) from concurrent.futures import ThreadPoolExecutor,ProcessPoolExecutor import os,time, ...

  10. （译）Kubernetes中的多容器Pod和Pod内容器间通信

    原文:https://www.mirantis.com/blog/multi-container-pods-and-container-communication-in-kubernetes/Pave ...