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内容的方 ...
随机推荐
- apache配置文件详解（中英文对照版）
# This is the main Apache server configuration file. It contains the # configuration directives that ...
- [C7] 支持向量机(Support Vector Machines) (待整理)
支持向量机(Support Vector Machines) 优化目标(Optimization Objective) 到目前为止,你已经见过一系列不同的学习算法.在监督学习中,许多学习算法的性能都非 ...
- IntelliJ IDEA 版本控制 GIT（四）
1. 从GitLab或GitGitHub中检出项目 VCS - Checkout from Version Control - Git 2. 更新项目 第一种:更新当前窗口下的整个项目 第二种:更新相 ...
- js判断为空
function isEmpty (va){ if("undefined" == va){ return true; } if(null == va ...
- 洛谷P4173 残缺的字符串
题目大意: 两个带通配符的字符串\(a,b\),求\(a\)在\(b\)中出现的位置 字符串长度\(\le 300000\) 考虑魔改一发\(kmp\),发现魔改不出来 于是考虑上网搜题解 然后考虑\ ...
- 校园邮箱注册jetbrains全家桶遇到的问题
校园邮箱怎么注册jetbrains账号,百度就可以,发两次邮件 我遇到的问题: 1.登录时出现connection refused 因为之前都是破解使用,所以修改过hosts文件,添加了“0.0.0. ...
- 小白专场-堆中的路径-python语言实现
目录 更新.更全的<数据结构与算法>的更新网站,更有python.go.人工智能教学等着你:https://www.cnblogs.com/nickchen121/p/11407287.h ...
- 当usbnet打印 kevent * may have been dropped（转）
http://patchwork.ozlabs.org/patch/815639/ Every once in a while when my system is under a bit of str ...
- linux操作系统 - 综合习题
登录超级用户,完成以下操作: [linux@slave053 ~]$ su - 1.用户和组群管理(本大题共5小题,共10分) (1)创建两个用户tangseng,monkey,并指定密码为12345 ...
- 汇总Anaconda与ROS冲突解决方法
汇总一下在网上找到的Anaconda与ROS冲突解决方法,如果还有其他人找到其他方法,欢迎留言. anaconda和ros的安装就不介绍了. 1. 在某视频网站上一个印度小哥提出的方法 安装完成后,在 ...