html定位代码表,html定位（⽰例代码）
.定位
定位的⽅式有:static-静态定位(默认)、fixed-固定定位、relative-相对定位、absolute-固定定位
div{
width: 200px;
height: 200px;
position: static;
}
⾸先设置了static，则位置不会发⽣改变，因为它本⾝就是默认，没有定位,⽽且不受letf、right、top、bottom的影响
fixed：固定定位
absolute relative通常我们在⼀些⽹站的左下⾓或者右下⾓看到⼀些⼴告,⽆论我们页⾯下拉到哪⾥始终都在⼀个位置显⽰，就是⽤的固定定位。
relative：相对定位
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
top: 30px;
left: 20px;
}
#div3{
width: 200px;
height: 200px;
background-color: black;
}
我们可以将⽂档流看做在页⾯上分为⼀⾏⼀⾏。⽽上代码运⾏后显⽰结果可以看出相对定位是从原有的位置进⾏位移,⽽原来的位置还在空着没有被后续的元素补上，说明相对定位没有脱离⽂档流
absolute：绝对定位
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 200px;
height: 200px; background-color: blue; position: absolute;
top: 20px;
left: 30px;
}
#div3{
width: 200px;
height: 200px; background-color: black; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。