1. 相对定位 position: relative
相对于自己原来的位置进行偏移,仍然在标准文档流中,原来的位置会被保留
相对定位前:
相对定位后:
#first{
background: #ff53cf;
border: 1px dashed #12f611;
position: relative;/*相对定位*/
top: -30px;
left: 20px;
}
2. 绝对定位 position: absolute
没有父级元素定位时,相对浏览器页面定位
若父级元素存在定位,则相对父级元素定位,并且在父级元素范围内移动
相对于父级或浏览器的位置,指定偏移,绝对定位则不在标准文档流中,原来的位置会被保留
无父级元素定位:
#father{
border: 1px solid #666;
padding: 0;
/*position: relative;*/
}
#second{
background: red;
border: 1px dashed #616;
position: absolute;
right: 30px;
}
有父级元素定位:
#father{
border: 1px solid #666;
padding: 0;
position: relative;
}
#second{
background: red;
border: 1px dashed #616;
position: absolute;
right: 30px;
}
3. 固定定位 position: fixed
div:nth-of-type(1){ /*绝对定位 相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){ /*固定定位 fixed */
width: 70px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}