css 最后的终章

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

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 最后的终章的更多相关文章

BugPhobia终章篇章：学霸在线系统Beta阶段展示
0x00 :序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet y ...
C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.)
前言系列目录 C#使用Xamarin开发可移植移动应用目录源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 本系列,终 ...
史上最简单的 SpringCloud 教程 | 终章
https://blog.csdn.net/forezp/article/details/70148833转载请标明出处:http://blog.csdn.net/forezp/article/det ...
SpringBoot非官方教程 | 终章：文章汇总
转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot-all/ 本文出自方志朋的博客 SpringBo ...
JDBC终章- 使用 DBUtils实现增删查改- C3P0Utils数据源/QueryRunner runner连接数据源并执行sql
JDBC终章- 使用 DBUtils实现增删查改 1.数据库结构 Create Table CREATE TABLE `user` ( `id` ) NOT NULL AUTO_INCREMENT, ...
SpringCloud 教程 | 终章
错过了这一篇,你可能再也学不会 Spring Cloud 了!Spring Boot做为下一代 web 框架,Spring Cloud 作为最新最火的微服务的翘楚,你还有什么理由拒绝.赶快上船吧,老船 ...
BUAA-OO-第四单元总结——终章
面向对象第四单元博客总结--终章第四单元作业设计第13次作业设计类和对应方法属性设计类设计如下图所示本次作业主要涉及六个类,其中包括主类 Main ,通用Map类 UmlElementIdM ...
【HTML XHTML CSS基础教程(第6版)】笔记之CSS笔记(7~25章)
第7章 CSS构造块 1.在样式表中添加注释 /*内容*/ 2.CSS颜色 rgb(红,黄,蓝) 这三个参数可以用百分号:rgb(35%,0%,50%); 也可以用数字,如上代码就相当于r ...
HTML与CSS入门——第二章发布Web内容
知识点: 1.使用文本编辑器创建一个基本的HTML文件的方法 2.使用FTP将文件传送到你的Web服务器的方法 3.文件在Web服务器上应该存储的位置 4.在没有Web服务器的情况下分发Web内容的方 ...

随机推荐

excel制作田字格，excel行高磅，列宽1/10英寸；
打开一个excel表格,发现列宽是行高的4倍: 开始-格式中查看,发现行高14.25磅,列宽8.38*1/10英寸: 网上百度,了解1英寸=72磅: 那么列宽8.38=60.336磅: 60.336英 ...
不获取元素，直接使用id操作dom元素
今天无意中发现个让我很吃惊的问题. 不使用getElementById方法,也可以用id直接操作有id的元素. 继续搜索后,发现name也可以直接操作... 这让我大感意外,了解以后,忍不住写点东西记 ...
[PHP] 破Laravel白屏问题
可能解决方法如下: 1.Nginx在配置文件中添加 location / { try_files $uri $uri/ /index.php?$query_string; } 2.app ...
CentOS6.9安装SonarQube7.6
1 安装前准备 Java (Oracle JRE 8 or OpenJDK 8) MySQL5.6 or MySQL5.7,具体可参考Centos6.9安装MySQL5.6 SonarQube7.6, ...
IPv6 邻居状态迁移
Oracle数据库的关键系统服务整理
在Windows 操作系统下安装Oracle 9i时会安装很多服务——并且其中一些配置为在Windows 启动时启动.在Oracle 运行在Windows 下时,有些服务可能我们并不总是需要但又害怕停 ...
vscode10个必装的插件
VSCode 必装的 10 个高效开发插件本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创 ...
【MySQL】MMM和MHA高可用架构
用途对MySQL主从复制集群的Master的健康监控. 当Master宕机后把写VIP迁移到新Master. 重新配置集群中的其他Slave从新Master同步 MMM架构主服务器发生故障时, 1 ...
git 创建标签 tag
1. git tag <name>就可以打一个新标签加上-a参数来创建一个带备注的tag,备注信息由-m指定.如果你未传入-m则创建过程系统会自动为你打开编辑器让你填写备注信息. git ...
『Exclusive Access 2 dilworth定理状压dp』
Exclusive Access 2 Description 给出 N 个点M 条边的无向图,定向得到有向无环图,使得最长路最短. N ≤ 15, M ≤ 100 Input Format 第一行一个 ...

css 最后的终章

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

随机推荐

热门专题