“位置：底部”不适用于相对定位的按钮元素 [英] 'Position: bottom' not working on relatively positioned button element

问题描述

目标：获取固定在 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;
}

这篇关于“位置：底部”不适用于相对定位的按钮元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！