Goal: 获取button元素固定在底部main元素。我尝试使用相对定位来定位它的容器，以便它粘在底部：
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
这并没有移动.wrapper根本没有。有想法吗？
@import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );
* {
box-sizing: border-box;
}
main {
background-color: #eee;
}
main, input {
padding: 2%;
}
main input {
width: 100%;
margin: 5% 0;
border: 0;
}
.clr-fix::after {
content: "";
display: block;
clear: both;
}
.wrapper {
width: 23%;
margin: 1%;
padding: 2%;
background-color: #ddd;
float: left;
}
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
<main class="clr-fix">
<div class="wrapper">
<input type="text" value="position:bottom">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="wrapper">
<input type="text">
<input type="text" value="Isn't working">
<input type="text">
<input type="text">
</div>
<div class="wrapper">
<input type="text">
<input type="text">
<input type="text" value="On 'A button'">
<input type="text">
</div>
<div class="wrapper">
<button>A button</button>
</div>
</main>
相对定位是相对于元素已经定位的位置的变化。因此，如果position:relative、bottom:0（或top:0、left:0、right:0等）意味着将其保留在当前位置。
如果您希望将其定位到元素的底部，则需要将父元素设置为“相对”，并将要固定到底部的元素设置为“绝对”（底部：0）。绝对定位的元素将跳出 DOM 流，并相对于其最接近的相对父元素移动。
本质上你想要：
.wrapper {
position: relative;
}
.wrapper:nth-child(4){
position: absolute;
bottom: 0;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
