css定位
定位分为静态定位,相对定位,绝对定位,固定定位四种。
固定定位:相对于浏览器定位、
相对定位:相对于原本的位置定位(依然会占据原来的空间)
绝对定位:相对于离它最近的已定位父级定位
1、静态定位(static)
一般的标签元素不加任何定位属性都属于静态定位,在页面的最底层属于标准流。
2、绝对定位(absolute)
绝对定位的元素从文档流中拖出,使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位,绝对定位元素可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在上面,可以有负值。
#jueDui{
background: lightgreen;
position: absolute;
left: 100px;
top: 100px;
3、相对定位(relative)
相对定位元素不可层叠,依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
#xiangDui{
background: lightcoral;
position: relative;
left:100px;
top: 100px;
}
4、固定定位(fixed)
固定定位与绝对定位类似,但它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动。
#guDing{
background: lightblue;
position: fixed;
left: 500px;
top: 200px;
position: fixed;}
浙公网安备 33010602011771号