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内容的方 ...
随机推荐
- Host '10.133.3.34' is not allowed to connect to this MySQL server mysql 本地拒接连接
mysql 本地拒接连接 解决方案是,把mysql库中的user表的host 改成% 运行所电脑连接 也可以把第一行复制一遍 把localhost改成你要连接电脑的ip(推荐这改,这样安全一点) 改 ...
- markdown 编辑格式
# h1## h2### h3#### h4##### h5###### h6 *em* **strong** ***斜体加粗*** ~~待删除~~ 无序列表,用 * + - 都可以表示,[可以用四个 ...
- lua 7 运算符
转自:http://www.runoob.com/lua/lua-miscellaneous-operator.html Lua提供了以下几种运算符类型: 算术运算符 关系运算符 逻辑运算符 其他运算 ...
- zz“老司机”成长之路：自动驾驶车辆调试实践
随着自动驾驶技术的发展,一辆新车从被改装到上路需要经过的调试流程也有了许多提升.今天,我希望结合自己之前的调车经验来跟大家分享一下我们是如何将系统的各个模块逐步上车.调试.集成,进而将一辆“新手”车培 ...
- html各种弹出框和提示框
控制台输出 console.log() console.info() confirm() alert() promt() 提示对话框
- React、Vue、Angular对比 ---- 介绍及优缺点
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它.它 ...
- 群体遗传之ped格式
1.PED简介 PED文件格式是广泛使用的用于连锁系谱数据分析的格式,并用作plink程序的输入.PLINK是一个免费的,开源的全基因组关联分析工集,旨在以高计算效率的方式执行一系列基本的,大规模的分 ...
- 在Azure DevOps Server中运行基于Spring Boot和Consul的微服务项目单元测试
1 概述 谈到微服务架构体系,绕不开服务发现这个功能.服务发现机制是简化微服务配置.实现容灾.水平扩缩容.提高运维效率的重要方式.在服务发现工具中,Consul在部署和使用方面与容器结合的天衣无缝,成 ...
- CodeForces - 560D Equivalent Strings
Today on a lecture about strings Gerald learned a new definition of string equivalency. Two strings ...
- Autoware 培训笔记 No. 3——录制航迹点
1.前言 航迹点用于知道汽车运行,autoware的每个航迹点包含x, y, z, yaw, velocity信息. 航迹点录制有两种方式,可以开车录制航迹点,也可以采集数据包,线下录制航迹点,我分开 ...