定位position属性float、absolute、relative
程序员文章站
2022-04-25 11:20:41
...
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>
</bodrelative：不脱离文档流、对前一个元素定位（相当于对自身原来位置进行偏移）
<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尽量不用！
上一篇： float脱离文档对高度的影响
下一篇： 如何实现让button居中
推荐阅读
-
CSS定位中Positoin、absolute、Relative的一些研究
-
html/css中相对定位relative和绝对定位absolute的用法
-
css position: absolute、relative详解
-
CSS position(定位)属性
-
详细分析css float 属性以及position:absolute 的区别
-
position属性中absolute与relative的区别讲解
-
CSS定位、CSS的position属性实例讲解
-
position absolute relative
-
CSS布局 ——从display，position， float属性谈起
-
推荐深入理解css中的position定位和z-index属性