1、绝对定位
元素没有设定 position 属性,但依旧具有 position 属性,其值为 static
绝对定位的元素从文档流中删除,并相对于其最近的 position 属性为 absolute、relative、fixed 的祖先元素定位,若没有这样的祖先元素,则根据浏览器定位,元素原来在文档流中的控件被关闭, 其层叠通过 z-index 属性决定,此时对象不具有边距(margin)
- <div class="content">
- <div class="redBlock">
- </div>
- </div>
- .content {
- width: 1000px;
- height: 800px;
- margin: 0 auto;
- border: 1px solid#000;
- }.redBlock {
- width: 300px;
- height: 300px;
- position: absolute;
- top: 200px;
- left: 200px;
- background: red;
- }
显示效果如下
红色块元素并未相对于黑色边框的元素绝对定位,而是相对浏览器定位,原因是红色块的父级元素 position 属性并非为 absolute、relative、fixed
解决方案就是红色块的父级元素 position 属性设置为 absolute、relative、fixed
- .content {
- width: 1000px;
- height: 800px;
- position: relative;
- margin: 0 auto;
- border: 1px solid#000;
- }
显示效果如图所示
2、相对定位
参考父级元素配合 top、right、bottom、left 属性进行定位
- .content {
- width: 1000px;
- height: 800px;
- margin: 0 auto;
- border: 1px solid#000;
- }.redBlock {
- width: 300px;
- height: 300px;
- position: relative;
- top: 200px;
- left: 200px;
- background: red;
- }
效果如图所示,红色块相对于黑色边框定位
相对定位时,若父级元素设置 padding,则子元素相对于父级元素的内容区域定位,不包含 padding
注:绝对定位和相对定位会使元素变为块级元素
来源: http://www.bubuko.com/infodetail-1863325.html