/* 布局：文档在文档流 浮动 定位 弹性盒子等等 */
/* 定位是什么：是一种高级的定位手段，通过position属性设置定位。
position可选值：
static 默认值，没有开启定位。
relative 开启相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位
每一种定位对应的特点：
static 默认值，没有开启定位。
relative 开启相对定位：
1、开启相对定位之后，元素如果不配合*偏移量*使用（left：相对于定位位置左侧偏移量 right：相对于定位位置右侧偏移量 top：相对于定位位置上侧偏移量 bottom：相对于定位位置下侧偏移量 ） 元素没有任何变化。
2、相对定位的原点，就是元素原来在文档流中的位置。
3、开启了相对定位后，元素的层级提高了。
4、开启相对定位 元素性质不会改变，块还是块，行内还是行内。元素不会脱离文档流。
一般情况下 水平方向的偏移量，垂直方向的偏移量只用一个值确定，不会同时使用两个值 容易出问题
absolute 开启绝对定位
1、一旦开启绝对定位，元素就会脱离文档流。
2、元素的性质就发生了改变，不在区分块 行内块 行内元素，就可以设置宽高。
3、开启绝对定位 元素的层级也会提高
4、绝对定位如果要元素的位置发生改变 依然需要配合偏移量
5、绝对定位的原点相对于其包含块（1、在没有定位的情况下就是离当前元素最近的祖先元素2、有定位的情况下，包含块是离其最近的 开启定位的祖先元素。如果他的祖先元素都没有开启定位，包含块就是根元素html又叫初始包含块）来定位的。
一般情况下，给子元素设置绝对定位同时也会给父元素设置相对定位。叫“子绝父相”但具体情况具体分析。
fixed 开启固定定位
1、开启定位后，元素会脱离文档流，元素的性质也会发生改变。
2、开启之后，元素会固定在页面中，不会随着滚动条滚动而滚动，
3、元素的层级也会提高
4、元素位置的改变也需要配合偏移量去使用
5、固定定位是参照根标签来偏移的
一般情况下常用于固定的广告位 固定导航
sticky 开启粘滞定位
1、不会脱离文档流，元素的性质也不会发生改变。
2、粘滞定位要配合top值去使用。在没有到达top值之前 元素随着滚动条滚动而滚动，到达top值后 元素不会滚动了
3、粘滞定位的偏移量，定位点是浏览器的视口html
一般使用场景 广告和导航
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 600px;
border: 2px solid black;
}
.box1,.box2,.box3{
width: 200px;
height: 200px;
}
.box1{
background-color: aquamarine;
/* 开启绝对定位 */
/* position: absolute; */
/* left: 200px; */
/* top: 200px; */
}
.box2{
background-color: red;
/* 开启相对定位 */
/* position: relative; */
/* 设置偏移量 */
/* left: 200px;
bottom: 200px; */
}
.box3{
background-color: yellow;
/* position: fixed;
right: 0;
bottom: 0; */
/* left: 0;
top: 0; */
}
/* .s1{
width: 200px;
height: 200px;
background-color:green;
position: relative;
left: 100px;
top: 100px;
} */
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3
<span class="s1">我是一个span</span>
</div>
</div>
</body>
</html>
3217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
