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内容的方 ...

随机推荐

DQN的三大改进：
Double DQN:https://www.jianshu.com/p/fae51b5fe000 Prioritised Replay:https://www.jianshu.com/p/db14f ...
Git仓库占用空间太大的解决方法
git gc --aggressive对本地git库进行更彻底清理和优化,这个指令花费的时间也会更长. 胡云飞系统部署搭建整体把控:git gc --auto这是一个设置的指令,并不会进行gc操作.如 ...
【转】UML各种图总结
UML(Unified Modeling Language)是一种统一建模语言,为面向对象开发系统的产品进行说明.可视化.和编制文档的一种标准语言.下面将对UML的九种图+包图的基本概念进行介绍以及各 ...
Codeforces Rating System
来翻译一下官方文档,但是建议看英文原文,本文可能会出现一些错误,虽然不是为了方便自己查阅用的. 首先,对于人 $i$,定义 $r_i$ 是他的 rating,对于人 $i,j$,定义 \( ...
vue_day05
目录 vue前后端交互: vue 分离前后端交互: vue前端发送请求: vue请求插件--axios: main.js配置: 前端朝后端请求传参方式: django后端返回数据样式: vue配置El ...
windows上安装python和python开发工具
一.python安装: 登录python官网,下载需要的安装包:https://www.python.org/downloads/windows/.,一般就下载 executable installe ...
QListWidget QListView QListWidgetItem样式设置
两种方式都可以,一个通用,一个具体 //具体 QListWidget#listWidget_param::Item:hover, QListWidget#listWidget_param::Item: ...
剑指offer：矩阵中的路径（递归回溯法DFS类似迷宫）
1. 题目描述 /* 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径. 路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子. 如果一条 ...
Ubuntu18.4编译pmon，缺少makedepend和pmoncfg
提示makedepend找不到解决方法:$ apt-cache search makedependxutils-dev - X Window System utility programs for d ...
APP兼容性测试 (二) 最新 iPhone 机型分辨率总结
iPhone手机发布时间及iOS发布 iPhone是美国苹果公司研发的智能手机系列,搭载苹果公司研发的iOS操作系统. 第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布, ...

css 最后的终章

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

随机推荐

热门专题