问题描述
目标:获取固定在 main
元素底部的 button
元素。我尝试将其容器定位为相对定位,以使其固定在底部:
Goal: Get the button
element fixed to the bottom of the main
element. I tried positioning it's container with relative positioning so it sticks to the bottom:
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
这不会移动 .wrapper
div。
This isn't moving the .wrapper
div at all. Ideas?
@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:相对,bottom:0(或top:0,left:0,right:0等)意味着将其保留在当前位置。
Relative positioning is a change in relation to the spot the element is already positioned. So if position: relative, bottom: 0 (or top:0, left:0, right:0, etc) means leave this at the same spot it currently is.
如果要将其放置在元素的底部,则需要使父元素位置:相对,并将您要固定在底部位置的元素:绝对(底部:0)。绝对定位的元素将跳出DOM流,而相对于其最接近的相对父元素而去。
If you want this positioned to the bottom of the element, you need to make the parent element position: relative, and the element you want pinned to the bottom position: absolute (with bottom: 0). Absolutely positioned elements will hop on out of the DOM flow and go instead in relation to it's closest relative parent.
基本上,您想要:
.wrapper {
position: relative;
}
.wrapper:nth-child(4){
position: absolute;
bottom: 0;
}
这篇关于“位置:底部”不适用于相对定位的按钮元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!