您的位置：首页 > 其它

定位position属性float、absolute、relative

2018-03-17 23:10 543 查看

float：包裹性、破坏性、脱离文档流

包裹性和破坏性即为display=inline-block，块级元素用的话及失去块级元素的特性（下同）

会影响行内元素的位置，不占据块级元素的位置

行内元素与浮动元素重叠，行内元素的边框，背景和内容都会显示在浮动元素之上

块级元素与浮动元素重叠，块级元素的边框，背景会显示在浮动之下，内容在浮动之上

清除浮动：clear只对本身的布局起作用，如下代码所示

<style>
.float{
float:left;
width:100px;
height:30px;
background:red;
margin-left: 5px;
}
.cl{
clear:right;
}
</style>
<body>
<div class='box'>
<div class='float cl'>1111</div>
<div class='float'>1111</div>
<div class='float'>1111</div>
</div>
</body>

<style>
.float{
float:left;
width:100px;
height:30px;
background:red;
margin-left: 5px;
}
.cl{
clear:right;
}
</style>
<body>
<div class='box'>
<div class='float cl'>1111</div>
<div class='float'>1111</div>
<div class='float'>1111</div>
</div>
</body>

absolute：包裹性、破坏性、脱离文档流

<style>
*{
margin:0;
padding:0;
}
.contain{
top:100px;
left:50%;
background:red;
position:absolute;
}
</style>
<body>
<div class='contain'>
<img src='img/1.png' width='200' height='200'>
<p>包裹性</p>
</div>

</body>

<style>
*{
margin:0;
padding:0;
}
.contain{
text-align: center;
background:red;

}
img{
position: absolute;
left:10px;
}
</style>
<body>
<div class='contain'>
<img src='img/1.png' width='200' height='200'>
<p>破坏性、脱离文档流</p>
</div>

</body>

要激活对象中absolute定位，必须有left、right、bottom、left中至少一个，否者都会默认为auto。（LRBT属性要在position下才有效果）

p{
width:100px;
height:100px;
left:20px;//无定位position
background: blue;
}
</style>
<body>
<div>
<p></p>
</div>
</body>

若当对象设定了absolute，如果父级（无上限）没有设定position属性，那么对象以浏览器的左上角为原点定位。父级（最近）设有position属性，则以父级（最近）的左上角为原点进行定位

<style>
*{
margin:0;
padding:0;
}
div{
background: red;
width:200px;
height:200px;
}
.one{
margin:10px 0 0 10px;
}
.two{
margin:20px 0 0 20px;
background: black;
position:absolute;
}
.three{
margin:30px 0 0 30px;
background: green;
}
p{
width:100px;
height:100px;
left:5px;
background: blue;
position:absolute;
}
</style>
<body>
<div class='one'>
<div class='two'>//设有position，以他左上角为原点
<div class='three'>
<p></p>
</div>
</div>
</div>
</body>

<style>
*{
margin:0;
padding:0;
}
div{
background: red;
width:200px;
height:200px;
}
.one{
margin:10px 0 0 10px;
}
.two{
margin:20px 0 0 20px;
background: black;
position:absolute;
}
.three{
margin:30px 0 0 30px;
background: green;
}
p{
width:100px;
height:100px;
/*left:5px;*/
background: blue;
position:absolute;
}
</style>
<body>
<div class='one'>
<div class='two'>
<div class='three'>
<p>没有设置TRBL值</p>
</div>
</div>
</div>
</body>

<style>
*{
margin:0;
padding:0;
}
div{
background: red;
width:200px;
height:200px;
}
.one{
margin:10px 0 0 10px;
}
.two{
margin:20px 0 0 20px;
background: black;
}
.three{
margin:30px 0 0 30px;
background: green;
}
p{
width:100px;
height:100px;
left:5px;
top:5px;
background: blue;
position:absolute;
}
</style>
<body>
<div class='one'>
<div class='two'>
<div class='three'>
<p>没有父级设置position属性，则以浏览器为原点</p>
</div>
</div>
</div>
</body>

绝对定位的对象在可视区之外会导致滚动条的出现

<style>
*{
margin:0;
padding:0;
}
p{
width:100px;
height:100px;
right:-30px;
background: blue;
position:absolute;
}
</style>
<body>
<div class='one'>
<div class='two'>
<div class='three'>
<p>超出可视区，出现滚动条</p>
</div>
</div>
</div>
</bod

relative：不脱离文档流、对前一个元素定位（相当于对自身原来位置进行偏移）

<style>
*{
margin:0;
padding:0;
}
p{
width:100px;
height:100px;
}
.one{
background: yellow;
position:relative;
top:120px;
}
.two{
background: red;
}
</style>
<body>
<p class='one'><b>对象依旧占据原来空间，移动会覆盖其他元素</b></p>
<p class='two'></p>
</body>

总结：

一般来讲，网页一直随着分辨率的大小自适应，absolute会有以浏览器左上角为原点进行定位，不会跟着分辨率变化而变化位置。设置relative的话，可以保持对象在文档流中，它的位置根据它的前一个对象进行偏移。所以，能不用absolute尽量不用！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航