CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

(1)相对定位

概念

被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

普通流html代码

 

    
    
    


    
javascript
    
Java
    
HTML

普通流css代码

.box1 {
    background-color:rebeccapurple;
    width:100px;
    height:100px;
}
.box2 {
background-color:yellow;
width:100px;
height:100px;
position:relative;
left:200px;
}
.box3 {
background-color:blue;
width:100px;
height:100px;
position:relative;
right:20px;
}

效果显示

 

(2)绝对定位

概念

绝对定位的框可以从它的包含块向上、右、下、左移动。绝对定位的框脱离普通流，它可以覆盖页面上的其他元素，同时它也可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

html代码

    
    
    


    
javascript
    
Java
    
HTML

css代码

* {
margin:200px;
padding:0px;
}
.box1 {
width:200px;
height:200px;
background:#ff0000;
}
.box2 {
width:30%;
height:30%;
background:#00ff90;
top:10px;
left:100px;
position:absolute;
}
.box3 {
width:60%;
height:60%;
left:400px;
top:400px;
left:300px;
position:absolute;
background:#ffd800;
}

显示效果

希望这篇文章可以帮助到热爱编程的小伙伴！