定位
定位的概念：
-
除非专门指定，否则所有框都在普通流中定位。
-
也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。
-
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素甚至浏览器窗口本身的位置
-
通过使用 position 属性，我们可以选择 4 种不同类型的定位
position属性是把元素放置到一个静态的、相对的、绝对的、或固定的位置中
position属性的四个值分别对应static、relative、absolute、fixed
-
left、right、top、bottom可以设置定位的位置
单位为 px 或 百分比都可以
left 和 right 同时设置时只有left有效
top 和bottom一起设置时只有top有效
相对定位
-
position:relative;
-
让元素相对定位：
元素先放置在未添加定位时候的区域
然后再不改变页面布局的情况下（
1、其他元素没有受到任何影响
2、自身原来的位置也保留
3、和浮动可以一起使用
）进行移动
-
位置设置
left: 设置元素 左边缘 到 原来左边缘位置 的距离
right: 设置元素 右边缘 到 原来右边缘位置 的距离
top: 设置元素 上边缘 到 原来上边缘位置 的距离
bottom: 设置元素 下边缘 到 原来下边缘位置 的距离
在相对定位中：left为正 元素向右走
在相对定位中：top为正 元素向下走
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
.outer div{
width: 200px;
height: 200px;
}
.con1{
background-color: orangered;
position: relative;
left: 0px;
right: 0px;
float: left;
}
.con2{
background-color: #5df2ff;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="con1"></div>
<div class="con2"></div>
</div>
</body>
</html>包含块：
-
绝对定位的元素 相对于它的包含块进行定位
-
如何确定一个元素的包含块，完全取决于它自身的position属性：
-
如果一个元素自身的position属性是 static或者是relative：它的包含块就是离他最近的祖先元素或者是格式化上下文。
-
如果一个元素自身的position属性是absolute，
它的包含块就是离他最近的 拥有定位属性（值不为static）的元素
-
如果一个元素自身的position属性是fixed
它的包含块就是viewport（视口）
-
补充：如果一个元素的position属性是absolute 或者是 fixed 在下边几种情况下，包含块会发生改变
1、当祖先元素的 拥有 transform 或 perspective 属性 并且值不为none的时候 它也是被当做包含块
2、当祖先元素 拥有 filter属性的时候（值不为none） 它也可以被当做包含块
-
如果由内向外找不到包含块条件的元素，那么html（根元素）被称作为初始包含块
-
绝对定位：
- 不预留任何的空间（脱离页面流)
- 通过指定当前元素 相对于其包含块偏移的量 来确定当前元素的位置
- 绝对定位以后，浮动失效。margin padding仍然可以使用
- left: 0; 让定位元素的左边距离包含块左边为0
- top: 0;让定位元素的上边距离包含块上边为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.outer{
width: 800px;
height: 500px;
background-color: red;
margin: 0 auto;
overflow: hidden;
/*transform: rotateX(0deg);*/
/*perspective: 300px;*/
position: relative;
}
.inner{
width: 600px;
height: 300px;
background-color: deeppink;
margin: 50px;
overflow: hidden;
position: relative;
}
.con{
width: 300px;
height: 200px;
background-color: greenyellow;
margin: 30px;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="con">
con
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>固定定位
固定定位：
- 不为元素预留空间（脱离页面流）
- 相对于视口（viewport）的位置来定位元素的
- 滚动页面滚动条的时候，视口不发生改变，元素位置也不会改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
.con{
height: 4000px;
background-color: #3c3c3c;
}
.left{
position: fixed;
width: 150px;
height: 300px;
left: 0;
top: 100px;
background-color: red;
text-align: center;
line-height: 100px;
font-size: 30px;
color: #fff;
animation: change .2s linear infinite;
}
.right{
position: fixed;
width: 150px;
height: 300px;
right: 0;
top: 100px;
background-color: red;
text-align: center;
line-height: 100px;
font-size: 30px;
color: #fff;
animation: change .2s linear infinite;
}
@keyframes change {
0%{
background-color: red;
}
20%{
background-color: green;
}
40%{
background-color: pink;
}
60%{
background-color: yellowgreen;
}
80%{
background-color: grey;
}
100%{
background-color: red;
}
}
</style>
</head>
<body>
<div class="con"></div>
<div class="gg">
<div class="left">
开局一条狗
<br>
装备全靠爆
</div>
<div class="right">
我是砸砸辉
<br>
是兄弟就来
<br>
砍我吧
</div>
</div>
</body>