CSS_css中的position：absolute定位不起作⽤或者溢出⽗元素隐藏不了的问题position介绍
position:absolute是相对⽗元素进⾏绝对定位的，且该⽗元素必须定义有position的值(relative、absolute、fixed)，若⽗元素没有定义有position，则是相对于body进⾏定位。
position总的来说分为绝对定位和相对定位。
css固定定位
值描述
absolute 绝对定位，⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。并且该⽗元素必须设置有position属性，可以将position
设置为relative。
fixed绝对定位，⽣成固定定位的元素，相对于浏览器窗⼝进⾏定位。
relative相对定位，⽣成相对定位的元素，相对于其正常位置进⾏定位。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky 粘性定位，该定位基于⽤户滚动的位置。它的⾏为就像 position:relative; ⽽当页⾯滚动超出⽬标区
域时，它的表现就像 position:fixed;，它会固定在⽬标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- prefix (查看以下实
例)。
inherit规定应该从⽗元素继承 position 属性的值。position:absolute定位不起作⽤
.html
<div class="list">
<div class="list-item"></div>
</div>
.css 错误写法
.list{
width: 500px;
height: 500px;
background: red;
margin: 0 auto;
}
.list-item{
width: 100px;
height: 100px;
background: #000;
position: absolute;
bottom: 0;
}
.css 正确写法
.list{
width: 500px; height: 500px; background: red; margin: 0 auto; position: relative; }
.list-item{
width: 100px; height: 100px; background: #000; position: absolute; bottom: 0;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。