Question

我有一个表单，其中提交按钮绝对定位，移动到右下角并部分隐藏（它看起来像设计上的四分之一圆）。当我将焦点放在其中一个输入字段上然后按TAB将焦点移动到按钮时，它会跳起并将整个表单内容移动。

样式非常基本：

<form action="">
   <input type="text" width="100px" placeholder="Text input">
  <button>Submit</button>
</form>

CSS

form {
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: #cef;
}

button {
  position: absolute;
  display: block;
  height: 100px;
  width: 100px;
  right: -50px;
  bottom: -50px;
  background: yellow;
}

这里的小提琴： https://jsfiddle.net/4zhL68z0/1/ Chrome版本为54.0.2840.87（64位）

剪辑不起作用，从底部更改位置：-20px到顶部：500px没有用，所以欢迎任何想法。

Answer 1

尝试将按钮放在容器中并定位绝对值。这是一个快速的小提琴：https://jsfiddle.net/giwan/4zhL68z0/2/

```

.button-container {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  bottom: -50px;
}

button {
  display: inline-block;
  border-radius: 360px;
  border: none;
  width: 100px;
  height: 100px;
  background: yellow;
}

```

或者，您可以使用图像在按钮上获得所需的效果。

Answer 2

试试这个。这对我有用。

    button {
       position: absolute;
       display: block;
       height: 100px;
       width: 100px;
       right: 0px;
       bottom: 0px;
       background: yellow;
       -moz-border-radius: 100px 0 0 0;
       -webkit-border-radius: 100px 0 0 0;
      }

当在Chrome中聚焦时，部分隐藏的按钮会跳起来

2 个答案: