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

随机推荐

Jenkins显示reportng测试报告
在搭建Jenkins自动化测试平台后,我们点击立即构建就可以运行测试用例了,但没有地方查看测试报告,现在写这篇博客总结怎么在Jenkins显示reportng测试报告. 在maven项目配置repor ...
scrapyd--scrapydweb
scrapyd-实际的管理爬虫程序 scrapyd 是由scrapy 官方提供的爬虫管理工具,使用它我们可以非常方便地上传.控制爬虫并且查看运行日志. scrapyd是c/s架构所有的爬虫调度工作全 ...
01 学习数据分析的python库
网页爬取 1.requests 2.BeautifulSoup 3.Scrapy 科学计算与数据分析 1.scipy 2.numpy 3.pandas 机器学习和深度学习 1.Scikit-learn ...
小白专场-是否同一颗二叉搜索树-c语言实现
目录一.题意理解二.求解思路三.搜索树表示程序框架搭建 3.1 如何建搜索树 3.2 如何判别 3.3 清空树更新.更全的<数据结构与算法>的更新网站,更有python.go.人 ...
第04组 Alpha冲刺（4/6）
队名:new game 组长博客:戳作业博客:戳组员情况鲍子涵(队长) 燃尽图过去两天完成了哪些任务才两天,也就是实现一些功能而已复习接下来的计划实现更多的功能为这周的比赛准备还剩 ...
angular修改端口号port
报错:Port 4200 is already in use. Use '--port' to specify a different port. 因为4200端口已被使用,请使用“--port”修改 ...
FFmpeg 常用结构体
0.FFmpeg 中最关键的结构体之间的关系 FFmpeg 中结构体很多.最关键的结构体可以分成以下几类: 1)解协议(http, rtsp, rtmp, mms) AVIOContext,URLPr ...
【shell脚本】检测当前用户是否为超级管理员===checkRoot.sh
检测当前用户是否为超级管理员,是则使用yum安装vsftpd,不是则输出提示信息脚本赋予执行权限 [root@VM_0_10_centos shellScript]# chmod a+x check ...
EasyUIDataGrid列标题换行显示
有时候表格标题字数太多,而宽度有限,就会导致一部分列的标题显示不出来这时候,加入如下css代码即可将标题换行显示 .datagrid-header-row .datagrid-cell span { ...
ElasticSearch 6.7.1操作纪录
以下操作均在 6.7.1版本中正常 c# ES客户端测试项目地址:https://gitee.com/dhclly/IceDog.ElasticSearchClient/tree/master/sr ...

css 最后的终章

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

随机推荐

热门专题