<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.d1{
width: 200px;
height: 200px;
background-color: red;
/*静态定位*/
position: static;
left:100px;
top: 100px;
}
.d2{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
right: 100px;
bottom: 100px;
}
.d3{
width: 200px;
height: 200px;
background-color: blue;
}
.d4{
width: 400px;
height: 400px;
background-color: blue;
}
.d5{
width: 300px;
height: 300px;
background-color: yellow;
}
.d6{
width: 200px;
height: 200px;
background-color: gray;
}
.d7{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 100px;
}
.d8{
width: 150px;
height: 150px;
background-color: green;
}
.div1{
width: 200px;
border: 1px solid red;
position: relative;
}
.div1 img{
width: 200px;
}
.div1 p{
width: 200px;
background-color: gray;
position: absolute;
left: 0;
bottom: 0;
}
.d9{
width: 400px;
height: 400px;
background-color: red;
}
.d10{
width: 200px;
height: 200px;
background-color: yellow;
}
.d11{
width: 100px;
height: 100px;
background-color: blue;
/*固定定位*/
position: fixed;
left: 100px;
}
.d12{
width: 150px;
height: 150px;
background-color: gray;
}
ul{
border: 1px solid red;
width: 302px;
}
li{
list-style: none;
width: 300px;
height: 300px;
border: 1px solid bisque;
position: absolute;
left: 0;
top: 0;
font-size: 30px;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<!--
html阶段重要知识点：
1.标签
2.选择器&&css样式
3.盒模型
4.浮动
5.定位
-->
<!--
定位是元素的css样式，任何元素都可以设置定位效果
1.定位的种类
2.每种定位的特点
3.每种定位的适用场景
-->
<!--
定位：position一共有四个常用值
1.static 静态定位 默认值 设置了该值的元素对以下四个方位词不起作用
2.relative 相对定位
3.absolute 绝对定位
4.fixed 固定定位
设置position仅仅是规定了元素的定位方式，并不会让元素移动，如果想要让元素移动，还需要left，right，top,bottom这四个css样式的辅助。
以上四个方位词的理解：
距某个方向XX像素。
-->
<!--static-->
<!--<div class="d1"></div>-->
<!--relative 相对定位
1.其移动的参考是自身当前的位置
2.不完全脱离文档流，不会失去自己的位置，但是层级会提升
-->
<!--<div class="d2"></div>
<div class="d3"></div>-->
<!--
absolute 绝对定位
1.其移动的参考是离其最近的设置了非static定位的祖先元素
2.如果绝对定位的元素的所有元素都没有设置非static定位，此时该元素相对于整个文档定位。
3.绝对定位的元素完全脱离文档流，失去自己的位置，层级提升。
-->
<!--<div class="d4">
<div class="d5">
<div class="d6">
<div class="d7"></div>
<div class="d8"></div>
</div>
</div>
</div>-->
<!--
例子1
-->
<!--<div class="div1">
<img src="../../canvas/images/1.jpg"/>
<p>剑圣</p>
</div>-->
<!--固定定位 fixed
1.其移动的参考是整个文档
2.固定定位的元素完全脱离文档流，失去自己的位置，层级提升。
-->
<!--<div class="d9">
<div class="d10">
<div class="d11"></div>
<div class="d12"></div>
</div>
</div>-->
<!--多个定位元素的层级问题
元素因为定位导致的层级提升，如果多个元素位置有重合的情况，后写的会覆盖在先写的元素上面。
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号