【1】position属性制定了元素的定位类型。
【2】静态定位:(static)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- 静态定位:
如果我们不写position属性的话,相当于默认效果就是静态定位
静态效果:就是元素出现在他本该出现的位置。一般使用静态定位可以省略不写
-->
<img src="img/大主宰.jpg" style="position: static;"/>
</body>
</html>
【3】相对定位:(relative)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!--
相对定位:
相对元素自身所在的原来的位置进行定位。
可以设置left、right、top、bottom四个属性
效果:在进行相对定位以后,元素原来的位置被保留了,被占住了--》保留站位,其他元素的位置不会移动
一般情况下,right和left不会同时使用,top和bottom不会同时使用,两者选择一个方向即可。
优先级:左上>右下
-->
<div style="width: 31.25rem;height: 31.25rem;background-color: pink;">
<div style="width: 6.25rem;height: 6.25rem;background-color: bisque;"></div>
<div style="width: 6.25rem;height: 6.25rem;background-color: yellow;position: relative;bottom: 0.625rem;right: 1.25rem;"></div>
<div style="width: 6.25rem;height: 6.25rem;background-color: green;"></div>
</div>
</body>
</html>
相对定位的应用场合:
(1)元素在小范围移动;
(2)结合绝对定位使用;
再说一个属性:z-index
设置堆叠顺序,设置元素谁在上谁在下。
注意:z-index属性要设置在定位的属性上
z-index的使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!--
相对定位:
相对元素自身所在的原来的位置进行定位。
可以设置left、right、top、bottom四个属性
效果:在进行相对定位以后,元素原来的位置被保留了,被占住了--》保留站位,其他元素的位置不会移动
一般情况下,right和left不会同时使用,top和bottom不会同时使用,两者选择一个方向即可。
优先级:左上>右下
-->
<div style="width: 31.25rem;height: 31.25rem;background-color: pink;">
<div style="width: 6.25rem;height: 6.25rem;background-color: bisque;position: relative;left: 0.625rem;z-index: 100;"></div>
<div style="width: 6.25rem;height: 6.25rem;background-color: yellow;position: relative;bottom: 0.625rem;right: 1.25rem;z-index: 1;"></div>
<div style="width: 6.25rem;height: 6.25rem;background-color: green;"></div>
</div>
</body>
</html>
【4】绝对定位:(absolute)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#outer{
width: 31.25rem;
height: 31.25rem;
background-color: pink;
margin-left: 18.75rem;
}
#div01{
width: 6.25rem;
height: 6.25rem;
background-color: cornflowerblue;
position: absolute;
left: 1.875rem;
top: 3.125rem;
}
#div02{
width: 6.25rem;
height: 6.25rem;
background-color: coral;
}
</style>
</head>
<body>
<div id="outer">
<div id="div01">111</div>
<div id="div02">222</div>
</div>
</body>
</html>
暂时来说看到的效果:蓝色div相对body产生位移,相对body进行位置的改变,然后蓝色div发生位移后,原位置得到了释放。橙色div移动上去了!
实际开发中,我们往往让蓝色div在粉色div中发生位移效果:
配合定位来使用:
总结:
当给一个元素设置了绝对定位的时候它相对谁变化呢?它会向上一层一层的找父级节点是否有定位,如果直接找到body了也没有定位,那么就相对body进行变化。如果父级节点有定位(绝对定位,相对定位,固定定位),但是一般我们会配合使用父级为相对定位,当前元素为绝对定位,这样这个原色就会相对父级位置产生变化。无论是上面的那一种,都会释放原来的位置,然后其他元素会占用那个位置。
开发中建议使用:父级节点relative定位,子级节点使用绝对定位。
【5】固定定位:(fixed)--->使用频率很高,重点
应用场合:在页面过长的时候,将某个元素固定在浏览器的某个位置上,当拉动滚动条的时候,这个元素的位置固定不动。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#mydiv{
width: 3.125rem;
height: 25rem;
background-color: cadetblue;
/* 固定定位 */
position: fixed;
right: 0rem;
top: 18.75rem;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
</body>
</html>
效果展示: