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内容的方 ...
随机推荐
- day80_10_29git冲突解决与短信服务redis
一.开发中的操作. 在项目开发中,在工作区进行开发,开发结束后提交到本地版本库. 再拉取远程仓库,具体如下: """ 1.开发前,拉一次远程仓库 2.工作区进行开发 3. ...
- Git仓库占用空间太大的解决方法
git gc --aggressive对本地git库进行更彻底清理和优化,这个指令花费的时间也会更长. 胡云飞系统部署搭建整体把控:git gc --auto这是一个设置的指令,并不会进行gc操作.如 ...
- python socket编程腾讯云下报错[Errno 99] Cannot assign requested address的解决方式
先写服务端server.py: import socket import time HOST = '172.17.xx.xx' #服务器的私网IP #HOST = 'localhost' PORT = ...
- ulimit 用法和系统优化
ulimit :用于shell启动进程所占用的资源 -a:显示目前资源限制的设定: -c <core文件上限>:设定core文件的最大值,单位为区块: -d <数据节区大小>: ...
- [LOJ 6432][PKUSC 2018]真实排名
[LOJ 6432][PKUSC 2018]真实排名 题意 给定 \(n\) 个选手的成绩, 选中其中 \(k\) 个使他们的成绩翻倍. 对于每个选手回答有多少种方案使得他的排名不发生变化. \(n\ ...
- [LOJ 6213]「美团 CodeM 决赛」radar
[LOJ 6213]「美团 CodeM 决赛」radar 题意 给定 \(n\) 个横坐标 \(x_i\) , 为它们选择一个不超过 \(y_i\) 的纵坐标 \(h_i\), 产生 \(c_ih_i ...
- 在使用confluent-kafka-go 时遇到如下问题
问题 $ go build t.go # pkg-config --cflags rdkafka Package rdkafka was not found in the pkg-config sea ...
- .NET使用Bogus生成大量随机数据(转载)
原文地址:https://www.cnblogs.com/sdflysha/p/20190821-generate-lorem-data.html 在演示Demo.数据库脱敏.性能测试中,有时需要生成 ...
- windows xp 安装后不能能ping，浏览器不能上网
windows xp MSDN版本 下载地址: ed2k://|file|zh-hans_windows_xp_home_with_service_pack_3_x86_cd_x14-92408.is ...
- Springboot创建项目（idea版本）
一:概述 由于springboot项目,不管是java工程还是web工程都可以直接以jar方式运行,所以推荐创建jar工程,这里创建jar工程项目为例. 二:两种方式创建springboot项目 1. ...