您的位置：首页 > 其它

position定位

2016-11-01 17:35 169 查看
position有三种定位方式：静态定位，相对定位和绝对定位

它的属性值有四种：static，relative，absolute，fixe

position:relative;

相对定位的特点：相对于自身原有位置进行偏移，随即拥有偏移属性和z-index属性，处于标准文档流当中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.box1{
background:red;height:100px;
}
.box2{
background:yellow;height:200px;
<pre name="code" class="html">    position:relative;
top:50px;
left:50px;


 }.box3{ background:blue;height:100px;}</style></head><body><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body></html>

相对定位的效果如下图所示：



position:absolute;

绝对定位的特点：建立了以包含块为基准的定位；完全脱离了标准文档流；随即拥有偏移属性和z-index属性

(1)未设置偏移量：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.box1{
background:red;height:100px;
}
.box2{
background:yellow;height:200px;
position:absolute;
}
.box3{
background:blue;height:300px;
}
</style>
</head>

<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>




它会保持在初始位置，效果有点像浮动，会脱离标准文档流，并且在没有设置宽度的情况下，宽度会根据填充内容的宽度而改变

（2）有偏移量

1.没有已经定位的祖先元素，会以<html>为偏移的参照基准

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.box1{
background:red;height:100px;
}
.box2{
background:yellow;height:200px;
position:absolute;
top:50px;
left:20px;
}
.box3{
background:blue;height:300px;
}

</style>
</head>

<body>
<div class="box1">box1</div>
<div class="box">
<div class="box2">box2</div>
</div>
<div class="box3">box3</div>
</body>


2.有已经定位的祖先元素，会以离它最近的祖先元素为偏移的参照基准

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.box1{
background:red;height:100px;
}
.box2{
background:yellow;height:200px;
position:absolute;
top:50px;
left:20px;
}
.box3{
background:blue;height:300px;
}
.box{
position:relative;
height:100px;
background:pink;
}
</style>
</head>

<body>
<div class="box1">box1</div>
<div class="box">
<div class="box2">box2</div>
</div>
<div class="box3">box3</div>
</body>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航