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内容的方 ...
随机推荐
- lua 7 运算符
转自:http://www.runoob.com/lua/lua-miscellaneous-operator.html Lua提供了以下几种运算符类型: 算术运算符 关系运算符 逻辑运算符 其他运算 ...
- DQN的三大改进：
Double DQN:https://www.jianshu.com/p/fae51b5fe000 Prioritised Replay:https://www.jianshu.com/p/db14f ...
- 剑指Offer-8.跳台阶(C++/Java)
题目: 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 分析: 实际上就是斐波那契数列的一个应用,青蛙跳上n级台阶的跳法数等于跳 ...
- Special-Judge模板
SPJ模板 放一篇\(SPJ\)(\(Special-Judge\))的模板. 注意,仅适用于\(Lemon\). 并不适用于洛谷. 代码:@zcs0724 #include <bits/std ...
- 20191028 Codeforces Round #534 (Div. 1) - Virtual Participation
菜是原罪. 英语不好更是原罪. \(\mathrm{A - Grid game}\) 题解 \(4 \times 4\) 的格子,两种放法. 发现这两种在一起时候很讨厌,于是强行拆分这个格子 上面 \ ...
- CF-579 D. "Or" Game
题意: 给一列数,任选一个数,乘x,最多操作k次,问最后a[1]|a[2]|...|a[n]的最大值是多少; 思路: 或运算是0|0=0,1|0=1,0|1=1,1|1=1,那么每次乘一个大于等于2的 ...
- Prometheus神器之监控K8s集群
Prometheus 简介 Prometheus是SoundCloud开源的一款开源软件.它的实现参考了Google内部的监控实现,与源自Google的Kubernetes结合起来非常合适.另外相比i ...
- C# 匿名回调方法在循环体中使用的注意事项
今天在做AVG工具的选择分支功能时发现了一个问题,先把代码贴上来: private void SelectionParse(string value) { string[] ss = value.Sp ...
- SpringBoot入门-SpringBoot性能优化
SpringBoot启动优化 显示声明扫包范围: 即不使用@SpringBootApplication默认扫包,使用@ComponentScan(basePackages = { "com. ...
- Visual Studio 2017使用ODT 连接Oracle 数据库出现异常
2019.5.23 更新 突然发现原来是是sqlnet.ora在搞鬼,只要将SQLNET.AUTHENTICATION_SERVICES=(nts) 改为 SQLNET.AUTHENTICATION ...