Question

我有一个高度设置为0的容器，其中包含表格。

<div class="container">
    <div role="button" data-define="show.element">show register form</div>
    <div class="box-wrapper">
      <div class="box">
        <form>
          <input class="form-element" type="text" name="login" placeholder="login"/>
          <input class="form-element" type="password" name="password" placeholder="password"/>
          <input class="form-element-submit" type="submit"/>
        </form>
      </div>
    </div>
  </div>

我要实现的是，在单击带有“显示注册表单”文本的按钮后，将表单从“ box-wrapper”元素（最初将显示属性visibility设置为hidden）中滑出。单击时，我要添加css类，该类将更改框元素的高度并将box-wrapper元素的属性可见性设置为“ visible”。但是，表单输入元素不是像我打算的那样从盒包装元素中“滑出”，它们似乎最初已放置在“容器”元素的顶部。这是我的CSS代码：

body {
  background: #34495E;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #191919;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
div[data-define="show.element"] {
  width: 150px;
  text-align: center;
  background: none;
  border: 2px solid #3498db;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  transition: 0.25s;
  outline: none;
}
div[data-define="show.element"]:hover {
  cursor: pointer;
  border-color: #2ECC71;
}
div[data-define="show.element"]:active {
  transform: translatey(2px);
}
.box {
  width: 300px;
  height: 0;
  border: none;
  transition: 1s;

  &-wrapper {
    position: relative;
    margin: 15px auto;
    width: 300px;
    height: 300px;
    visibility: hidden;

    &-visible {
      visibility: visible;
    }
  }
  &-active {
    height: 300px;
  }
}
form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form-element {
  margin: 10px auto;
  width: 150px;
  background: none;
  border: 2px solid #3498db;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  transition: width 0.25s;
  text-align: center;
  outline: none;

  &-submit {
    margin: 10px auto;
    width: 150px;
    background: none;
    border: 2px solid #3498db;
    border-radius: 15px;
    color: white;
    padding: 5px 10px;
    transition: 0.25s;
    outline: none;
  }
}
.form-element:focus {
  width: 250px;
  border-color: #2ECC71;
}
.form-element-submit:hover {
  background: #2ECC71;
}

有效的Codepen：https://codepen.io/Furmanus/pen/oVqKJG?editors=0100

我做错了什么？谢谢您的帮助。

Answer 1

使身体相对。将z-index和background属性添加到show.element按钮。将框的高度设置为20px，以使box-wrapper似乎源自show.element按钮。

body {
  background: #34495E;
  position: relative;
}
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -12.5%;
    background: #191919;
    width: 400px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
div[data-define="show.element"] {
    width: 150px;
    z-index: 1;
    text-align: center;
    background: #191919;
    border: 2px solid #3498db;
    border-radius: 15px;
    color: white;
    padding: 5px 10px;
    transition: 0.1s;
    outline: none;
}
.box {
  width: 300px;
  height: 20px;
}

更新的密码笔-https://codepen.io/anon/pen/QorQrj?editors=0100

编辑-就像@kukkuz提到的那样，问题是justify-content。当父级的高度为0但辩称内容为中心时。它尝试将高度大于0的子元素垂直居中，最后在高度为0的父元素上垂直居中。

删除正当内容将按您想要的方式放置输入元素，但是幻灯片动画存在问题，因为输入元素停留在应该放置的位置，并且过渡没有区别，因为这些元素没有受到影响。

因此将输入元素的边距，边框，高度，填充默认设置为0。然后单击“显示注册表”，将这些属性更新为它们应该的属性。

https://codepen.io/anon/pen/QorQrj?editors=0100

Answer 2

您要做的就是使用button将box-wrapper放在堆叠上下文中的z-index上方。因此，将z-index: 1添加到button-因为z-index仅适用于定位的元素（元素不应该具有 static 位置），现在将工作。您可以阅读有关z-index and stacking context here的更多信息。

现在向button添加背景，以便我们可以直观地了解深度-请参见下面的演示和updated codepen：

const button = document.querySelector('div[role="button"]');
const submit = document.querySelector('input[type="submit"]');
const form = document.querySelector('form');
const box = document.querySelector('.box');
const boxWrapper = document.querySelector('.box-wrapper');
let isVisible = false;

button.addEventListener('click', () => {
  if (isVisible) {
    box.classList.remove('box-active');
    boxWrapper.classList.remove('box-wrapper-visible');
    isVisible = false;
  } else {
    box.classList.add('box-active');
    boxWrapper.classList.add('box-wrapper-visible');
    isVisible = true;
  }
});
form.addEventListener('submit', e => {
  e.preventDefault();
});

body {
  background: #34495E;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #191919;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
div[data-define="show.element"] {
  width: 150px;
  text-align: center;
  background: #191919; /* background added */
  border: 2px solid #3498db;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  transition: 0.1s;
  outline: none;
  position: relative; /* positioned the element */
  z-index: 1; /* added z-index */
}
div[data-define="show.element"]:hover {
  cursor: pointer;
  border-color: #2ECC71;
}
div[data-define="show.element"]:active {
  transform: translatey(2px);
}
.box {
  width: 300px;
  height: 0;
  border: none;
  transition: 1s;
}
.box-wrapper {
  position: relative;
  margin: 15px auto;
  width: 300px;
  height: 300px;
  visibility: hidden;
}
.box-wrapper-visible {
  visibility: visible;
}
.box-active {
  height: 300px;
}
form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form-element {
  margin: 10px auto;
  width: 150px;
  background: none;
  border: 2px solid #3498db;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  transition: width 0.25s;
  text-align: center;
  outline: none;
}
.form-element-submit {
  margin: 10px auto;
  width: 150px;
  background: none;
  border: 2px solid #3498db;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  transition: 0.25s;
  outline: none;
}
.form-element:focus {
  width: 250px;
  border-color: #2ECC71;
}
.form-element-submit:hover {
  background: #2ECC71;
}

<body>
  <div class="container">
    <div role="button" data-define="show.element">show register form</div>
    <div class="box-wrapper">
      <div class="box">
        <form>
          <input class="form-element" type="text" name="login" placeholder="login"/>
          <input class="form-element" type="password" name="password" placeholder="password"/>
          <input class="form-element-submit" type="submit"/>
        </form>
      </div>
    </div>
  </div>
</body>

要解决将表单元素放在container顶部而不是box-wrapper顶部的问题-看看将min-height: 0添加到{{ 1}}元素：

input

const button = document.querySelector('div[role="button"]');
const submit = document.querySelector('input[type="submit"]');
const form = document.querySelector('form');
const box = document.querySelector('.box');
const boxWrapper = document.querySelector('.box-wrapper');
let isVisible = false;

button.addEventListener('click', () => {
  if (isVisible) {
    box.classList.remove('box-active');
    boxWrapper.classList.remove('box-wrapper-visible');
    isVisible = false;
  } else {
    box.classList.add('box-active');
    boxWrapper.classList.add('box-wrapper-visible');
    isVisible = true;
  }
});
form.addEventListener('submit', e => {
  e.preventDefault();
});

body {
  background: #34495E;
}
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #191919;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
div[data-define="show.element"] {
  width: 150px;
  text-align: center;
  background: #191919; /* background added */
  border: 2px solid #3498db;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  transition: 0.1s;
  outline: none;
  position: relative; /* positioned the element */
  z-index: 1; /* added z-index */
}
div[data-define="show.element"]:hover {
  cursor: pointer;
  border-color: #2ECC71;
}
div[data-define="show.element"]:active {
  transform: translatey(2px);
}
.box {
  width: 300px;
  height: 0;
  border: none;
  transition: 1s;
}
.box-wrapper {
  position: relative;
  margin: 15px auto;
  width: 300px;
  height: 300px;
  visibility: hidden;
}
.box-wrapper-visible {
  visibility: visible;
}
.box-active {
  height: 300px;
}
form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form-element {
  margin: 10px auto;
  width: 150px;
  background: none;
  border: 2px solid #3498db;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  transition: width 0.25s;
  text-align: center;
  outline: none;
  min-height: 0; /* added */
}
.form-element-submit {
  margin: 10px auto;
  width: 150px;
  background: none;
  border: 2px solid #3498db;
  border-radius: 15px;
  color: white;
  padding: 5px 10px;
  transition: 0.25s;
  outline: none;
}
.form-element:focus {
  width: 250px;
  border-color: #2ECC71;
}
.form-element-submit:hover {
  background: #2ECC71;
}

问题显然是由于列flexbox 的默认<body> <div class="container"> <div role="button" data-define="show.element">show register form</div> <div class="box-wrapper"> <div class="box"> <form> <input class="form-element" type="text" name="login" placeholder="login"/> <input class="form-element" type="password" name="password" placeholder="password"/> <input class="form-element-submit" type="submit"/> </form> </div> </div> </div> </body>- flex项在flex方向上占用的空间最少

向顶部略微转移的另一个原因是，您的min-height: auto元素有justify-content: center。

HTML表单输入元素在外观上位于表单外部

2 个答案: