在CSS中扩展按钮，而无需绝对定位

Question

我正在尝试创建一个扩展的CSS按钮。我取得了一些进展，但除非使用绝对定位，否则似乎无法使它起作用。有没有办法将这种类型的按钮在页面上绝非绝对放置。谢谢你的帮助。以下是我到目前为止的。

我希望它可以工作而无需绝对放在页面上。

.add-new-button {
  right: 250px;
  position: fixed;
  width: 40px;
  height: 40px;
  background-color: #1BA1FC;
  border-radius: 40px;
  transition: width 0.3s;
  overflow: hidden;
  cursor: pointer;
}
.add-new-button-icon {
  top: 0;
  right: 0;
  z-index: 4;
  position: absolute;
  color: #fff;
  transition: transform 0.2s;
  width: 40px;
  height: 40px;
}
.add-new-button-icon i {
  top: 12px;
  height: 100%;
  margin-left: 14px;
  position: relative;
}
.add-new-button:hover {
  width: 110px;
}
.add-new-button:hover .add-new-button-icon {
  transform: rotate(90deg);
}
.add-new-button-label {
  width: 80px;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  font-family: "Source Sans Pro", sans-serif !important;
  font-weight: 700;
  position: relative;
  margin-top: 5px;
  padding-left: 10px;
  -moz-transition: all 200ms ease-in;
  -webkit-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  opacity: 0;
}
.add-new-button:hover .add-new-button-label {
  transition-delay: 0.1s;
  visibility: visible;
  opacity: 1;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="add-new-button">
  <div class="add-new-button-label">
    Add
  </div>
  <div class="add-new-button-icon">
    <i class="fa fa-plus"></i>
  </div>
</div>

Answer 1

(对我来说(您的按钮似乎不需要position: fixed;。它只需要一些足够的空间来推出。

#container {
    border: 2px black solid;
    display: flex;
    justify-content: flex-end;
    width: 200px;
}
.add-new-button {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #1BA1FC;
  border-radius: 40px;
  transition: width 0.3s;
  overflow: hidden;
  cursor: pointer;
}
.add-new-button-icon {
  top: 0;
  right: 0;
  z-index: 4;
  position: absolute;
  color: #fff;
  transition: transform 0.2s;
  width: 40px;
  height: 40px;
}
.add-new-button-icon i {
  top: 12px;
  height: 100%;
  margin-left: 14px;
  position: relative;
}
.add-new-button:hover {
  width: 110px;
}
.add-new-button:hover .add-new-button-icon {
  transform: rotate(90deg);
}
.add-new-button-label {
  width: 80px;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  font-family: "Source Sans Pro", sans-serif !important;
  font-weight: 700;
  position: relative;
  margin-top: 5px;
  padding-left: 10px;
  -moz-transition: all 200ms ease-in;
  -webkit-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  opacity: 0;
}
.add-new-button:hover .add-new-button-label {
  transition-delay: 0.1s;
  visibility: visible;
  opacity: 1;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="container">
    <div class="add-new-button">
      <div class="add-new-button-label">
        Add
      </div>
      <div class="add-new-button-icon">
        <i class="fa fa-plus"></i>
      </div>
    </div>
</div>