浮动是css里面布局最多的一个属性
效果：两个元素并排了，并且两个元素都能够设置宽度和高度
四个特性：
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素有“字围”效果
4.收缩的效果
脱标： 脱离了标准文档流
span标签不需要转成块级元素，也能够设置宽高。
所有的标签一旦设置浮动，能够并排，都不区分行内、块状元素，设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
400px;
height: 400px;
background-color: yellow;
}
span{
background-color: green;
float: left;
300px;
height: 50px;
}
</style>
</head>
<body>
<div class="box1">小红</div>
<div class="box2">小黄</div>
<span>span标签</span>
<span>span标签</span>
</body>
</html>
小红盒子浮动了，脱离了标准流，此时小黄这个盒子就是标准文档流中的第一个盒子。
所以就渲染到了左上方。 浮动元素 “飘起来了”，浮动元素当有足够的空间时，会紧贴在一起，没有没有足够的空间，会挨着边靠。
所谓字围效果：当div浮动，p不浮动
div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果
关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则
永远不是一个盒子单独浮动，要浮动就要一起浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
float: left;
}
p{
background-color: #666;
}
</style>
</head>
<body>
<div>
<img src="./images/picture.png" alt="">
</div>
<p>
123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>
</body>
</html>
收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
1126px;
/*子元素浮动 父盒子一般不设置高度*/
/*出现这种问题，我们要清除浮动带来影响*/
/*height: 300px;*/
}
.box1{
200px;
height: 500px;
float: left;
background-color: red;
}
.box2{
300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
400px;
float: left;
height: 100px;
background-color: blue;
}
.father2{
1126px;
height: 600px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
</body>
</html>
给浮动元素最后面加一个空的div 并且该元素不浮动,然后设置clear:both 清除别人对我的浮动影响 内墙法 无缘无故加了div元素 结构冗余
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
400px;
}
div ul li {
float: left;
100px;
height: 40px;
background-color: red;
}
.box{
200px;
height: 100px;
background-color: yellow;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div>
<ul>
<li>Python</li>
<li>web</li>
<li>linux</li>
</ul>
<div class="clear"></div>
</div>
<div class="box">
</div>
</body>
</html>
清除浮动伪元素方法
content: "."; display: block; height: 0; clear: both; visibility: hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素清除法（常用）</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
400px;
}
div ul li {
float: left;
100px;
height: 40px;
background-color: red;
}
.box{
200px;
height: 100px;
background-color: yellow;
}
/*伪元素选择器*/
.clearfix:after{
/*必须要写这三句话*/
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
/*
新浪首页清除浮动伪元素方法
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
*/
}
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li>Python</li>
<li>web</li>
<li>linux</li>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
清除浮动 overflow：hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow清除法</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.box{
400px;
overflow: hidden;
}
.box ul li {
float: left;
100px;
height: 40px;
background-color: red;
}
.box2{
200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>Python</li>
<li>web</li>
<li>linux</li>
</ul>
</div>
<div class="box2">
</div>
</body>
</html>
当给两个兄弟盒子 设置垂直方向上的margin 那么以较大的为准，那么我们称这种现象叫塌陷 浮动的盒子垂直方向 不塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin的塌陷</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
400px;
overflow: hidden;
border: 1px solid gray;
}
.box1{
300px;
height: 200px;
background-color: red;
margin-bottom: 20px;
float: left
}
.box2{
400px;
height: 300px;
background-color: green;
margin-top: 50px;
float: left;
}
span{
background-color: red;
}
span.a{
margin-right: 20px;
}
span.b{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
<span class="a">内容</span>
<span class="b">内容</span>
</body>
</html>
1.使用margin: 0 auto;水平居中盒子 必须有width，要有明确width，文字水平居中使用text-align: center; 2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 不能用了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中盒子</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*margin-left: auto;
margin-right: auto;*/
text-align: center;
float: left;
}
</style>
</head>
<body>
<div>
文字
</div>
</body>
</html>
善于使用父盒子的padding填充，不要使用margin，使用margin会使整个盒子移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
270px;
height: 270px;
background-color: blue;
padding-top: 30px;
padding-left: 30px;
/*border: 1px solid red;*/
}
.boby{
100px;
height: 100px;
background-color: orange;
/*margin-left: 30px;
margin-top: 30px;*/
}
</style>
</head>
<body>
<!-- 因为父亲没有border，那么儿子margin实际上踹的是“流” 踹的是行
所以父亲就掉下来
-->
<div class="father">
<div class="boby">
</div>
</div>
</body>
</html>
文本属性和字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
300px;
height: 100px;
/*background-color: red;*/
border: 1px solid red;
/*设置字体大小 px：像素 rem em %*/
font-size: 20px;
font-weight: 700;
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
text-align: center;
text-decoration: none;
color: blue;
cursor: pointer;
/*line-height: 100px;*/
/*1em = 20px*/
/*设置首字缩进 单位：em为准*/
text-indent: 2em;
}
</style>
</head>
<body>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
单行文本垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
300px;
height: 50px;
border: 1px solid red;
/*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本*/
line-height: 50px;
font-size: 18px;
}
</style>
</head>
<body>
<div>
这是一件有趣的事
</div>
</body>
</html>
多行文本垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
300px;
height: 160px;
border: 1px solid red;
padding-top: 40px;
/*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本*/
line-height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<div>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>
一个行高30px,一共4个行高 那就是120px.总高度是200px,如果让整个行高垂直居中在当前的盒子中 (200-120）/2=40px 设置padding-top,height的高度=40px
font-family
使用font-family注意几点： 1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装， 比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，那么就会变成宋体. 页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman 2.为了防止用户电脑里面，没有微软雅黑这个字体。 就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面， 没有安装微软雅黑字体，那么就是宋体： font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。 3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体， 就自动的变为后面的中文字体： font-family: "Times New Roman","微软雅黑","宋体"; 4.所有的中文字体，都有英语别名， 我们也要知道： 微软雅黑的英语别名： font-family: "Microsoft YaHei"; 宋体的英语别名： font-family: "SimSun"; font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; 5.行高可以用百分比，表示字号的百分之多少。 一般来说，都是大于100%的，因为行高一定要大于字号。 font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 反过来，比如： font:16px/48px “宋体”; 等价于 font:16px/300% “宋体”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字体</title>
<style>
p{
300px;
height: 60px;
/* 等价于
font-size: 14px;
line-height: 30px;
font-family: '宋体';
*/
font:14px/30px "Arial","Hanzipen SC","微软雅黑";
}
</style>
</head>
<body>
<p> 我是文本</p>
</body>
</html>
超链接美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
</ul>
</div>
</body>
</html>
background-color
颜色一共有三种：单词、rgb表示法、十六进制表示法 rgb:红色 绿色 蓝色 三原色 光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。 用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。 如果此项的值是255，那么就说明是纯色： 黑色： background-color: rgb(0,0,0); 光学显示器，每个元件都不发光，黑色的。 白色： background-color: rgb(255,255,255); 颜色可以叠加，比如黄色就是红色和绿色的叠加： background-color: rgb(255,255,0); background-color: rgb(111,222,123); 就是红、绿、蓝三种颜色的不同比例叠加。 16进制表示法 红色： background-color: #ff0000; 所有用#开头的值，都是16进制的。 #ff0000：红色 16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。 ff就是10进制的255 ，00就是10进制的0。所以等价于rgb(255,0,0); background-color: #123456; 等价于：background-color: rgb(18,52,86); 所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量一样。 十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc; 比如： background-color:#ff0000;等价于 background-color:#f00; background-color:#112233;等价于 background-color:#123; 只能上面的方法简化，比如 background-color:#222333;无法简化！ background-color:#123123;无法简化！ 要记住： #000 黑 #fff 白 #f00 红 #333 灰 #222 深灰 #ccc 浅灰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
200px;
height: 200px;
/*background-color: rgb(0,0,0);*/
background-color: #f00;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
background-image
平铺:background-repeat 不平铺:background-repeat: no-repeat;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
1500px;
height: 1600px;
background-image: url(./picture.jpg);
/*平铺*/
/*background-repeat*/
/*不平铺*/
/*background-repeat: no-repeat;*/
background-repeat: repeat-x;
/*padding: 100px;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
position /*正值 第一个值表示往右偏移 第二个值表示往下 负值则相反*/ background-position: -100px -100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
1500px;
height: 1600px;
border: 1px solid red;
background-image: url(./picture.jpg);
background-repeat: no-repeat;
/*水平方向 left center right
垂直方向 top center bottom
*/
background-position:center bottom;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
雪碧图技术（精灵图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0
}
.box1{
48px;
height: 48px;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: 0 -528px;
}
.box2{
48px;
height: 48px;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: 0 -440px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
/*background-image: url(./images/banner.jpg);*/
/*background-repeat: no-repeat;*/
/*水平居中通天banner图*/
/*background-position: center top;*/
/*综合属性设置*/
background: red url('./images/banner.jpg') no-repeat center top;
固定背景
background-attachment:fixed
定位
有三种：1.相对定位 2.绝对定位 3.固定定位
position:relative; position:absolute; position:fixed;
position: relative; top: 20px; left: 30px; 设置相对定位 我们就可以使用四个方向的属性 top left right bottom 相对定位：相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置
相对定位三大特性： 1.不脱标 2.形影分离 3.老家留坑 作用：1.微调元素位置 2.做绝对定位的参考（父相子绝）
<!-- 微调我们元素位置-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 100px;
}
.user{
font-size: 25px;
}
.submit{
30px;
height:30px;
position: relative;
top: -4px;
left: -5px;
}
</style>
</head>
<body>
<div>
<input type="text" name="username" class="user">
<input type="submit" name="" value="搜索" class="submit">
</div>
</body>
</html>
绝对的定位
1.脱标 2.做遮盖效果，提升层级 3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
200px;
height: 200px;
}
.box1{
background-color: red;
position: absolute;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
span{
100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>文字</span>
</body>
</html>
绝对定位参考点： 1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点 这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。 那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父盒子设置相对定位*/
position: relative;
padding: 50px;
}
.box2{
300px;
height: 300px;
background-color: green;
position: relative;
}
.box p{
100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="box2">
<p></p>
</div>
</div>
</body>
</html>
不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点 。
父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。
相反‘父相子绝’在我们页面布局中，是常用的布局方案。
因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整位置信息。
绝对定位盒子 设置绝对定位之后，margin:0 auto;不起任何作用， 如果想让绝对定位的盒子居中，设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
100%;
height: 69px;
background: #000;
}
.box .c{
960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px;
}
</style>
</head>
<body>
<div class="box">
<div class="c"></div>
</div>
</body>
</html>
固定定位：固定当前的元素不会随着页面滚动而滚动， 特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动 参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点 如果用bottom描述，那么是以浏览器的左下角为参考点 作用： 1.返回顶部栏 2.固定导航栏 3.小广告 position: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
/*给body设置导航栏的高度，来显示下方图片的整个内容*/
padding-top: 49px;
}
.wrap{
100%;
height: 49px;
background-color: #000;
/*设置固定定位之后，一定要加top属性和left属性*/
position: fixed;
top: 0;
left: 0;
}
.wrap .nav{
960px;
height: 49px;
margin: 0 auto;
}
.wrap .nav ul li{
float: left;
160px;
height: 49px;
text-align: center;
}
.wrap .nav ul li a{
160px;
height: 49px;
display: block;
color: #fff;
font: 20px/49px "Hanzipen SC";
background-color: purple;
}
.wrap .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav">
<ul>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
<li>
<a href="#">网页开发</a>
</li>
</ul>
</div>
</div>
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
<img src="./picture.jpg" alt="">
</body>
</html>
z-index
1.数值大的压盖住数值小的 2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index 3.z-index值没有单位，就是一个正整数，默认的z-index值为0 4.没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面 5.从父现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0
}
.rng{
200px;
height: 200px;
background-color: red;
position: relative;
z-index: 3;
}
.rng.omg{
100px;
height: 100px;
background-color: pink;
position: absolute;
top: 240px;
left: 300px;
z-index: 333;
}
.ig{
200px;
height: 200px;
background-color: yellow;
position: relative;
z-index: 4;
}
.ig.edg{
100px;
height: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 320px;
z-index: 111;
}
</style>
</head>
<body>
<div class="rng">
<p class="omg"></p>
</div>
<div class="ig">
<p class="edg"></p>
</div>
</body>
</html>