本文详细介绍了CSS中的定位属性position，包括static、relative、absolute和fixed四种类型。static是默认定位方式；relative允许元素偏移但不改变布局；absolute使元素脱离正常流，相对于最近的position为relative的祖先元素定位；fixed则使元素相对于浏览器窗口定位，常用于创建固定导航栏。
简述
定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助
position详解
在css中，通过position属性，配合top,right,left,buttom对元素进行定位
position属性有：static，relative，absolute，fixed四种，下面分别探讨
默认定位static
Document.container {
width: 400px;
height: 400px;
background-color: #DDDDDD;
}
.container div {
border: 1px solid #F5F5F5;
width: 100px;
height: 100px;
background-color: #06A7E1;
}
效果：
盒子一行一个，自动换行
相对定位relative
Document.container {
width: 400px;
height: 400px;
background-color: #DDDDDD;
}
.container div {
border: 1px solid #F5F5F5;
width: 100px;
height: 100px;
background-color: #06A7E1;
}
.x1{
position: relative;
top: 5px;
left: 5px;
}
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
绝对定位absolute
Document.container {
width: 400px;
height: 400px;
background-color: #DDDDDD;
position: relative;
}
.container div {
border: 1px solid #F5F5F5;
width: 100px;
height: 100px;
background-color: #06A7E1;
}
.x1{
position: absolute;
top: 50px;
left: 50px;
}
元素脱离原来的位置，释放来的空间，相当于被独立出来了，此时，它所相对的位置是它position为relative的父级元素，如果没有，则相对于body定位
固定定位fixed
元素框的表现类似于将 position 设置为 absolute，不过它的位置始终相对于窗口，可以实现固定导航栏的效果
扫一扫
1427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
