如何将 flex-grow div 限制在位置：相对 div 内？答案

【问题标题】：How to confine flex-grow div within position: relative divs?如何将 flex-grow div 限制在位置：相对 div 内？
【发布时间】：2017-08-04 02:19:49
【问题描述】：

我正在尝试使用div 创建一个基本滑块，我得到了结构。

我有父 div 和类 slider 三个孩子 div 称为 button1 buttpn2 和范围，我想要按钮到 display: relative 以便当我在按钮上使用 left 或 right 属性时应该移动。

我发现是position: relative，但是如何做出想要的滑块效果呢？

代码：https://jsfiddle.net/L0bjqdee/

.slider {
  width: 300px;
  height: 5px;
  background-color: #a0a0a0;
  display: flex;
  align-items: center;
}

.slider div {
  display: inline-block;
}

.button {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
  position: relative;
}

#button1 {
  left: 25px;
}

#button2 {
  right: 50px;
}

.button:hover {
  cursor: pointer;
}

.range {
  flex-grow: 2;
  height: 5px;
  background-color: blue;
}

<div class="slider">
  <div class="button" id="button1"></div>
  <div class="range"></div>
  <div class="button" id="button2"></div>
</div>

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

设置位置：相对于包含的 div，而不是按钮。将按钮设置为位置：absolute;

.slider{
  width:300px;
  height:5px;
  background-color:#a0a0a0;
  display:flex;
  align-items:center;
  position: relative;
}
.slider div{
  display: inline-block;
}
.button{
  width:10px;
  height:10px;
  border-radius:5px;
  background-color:red;
  position: absolute;
}
#button1{
  left:25px;
}
#button2{
  right:50px;
}
.button:hover{
  cursor:pointer;
}
.range{
  flex-grow:2;
  height:5px;
  background-color:blue;
}

<body>
  <div class="slider">
    <div class="button" id="button1"></div>
    <div class="range"></div>
    <div class="button" id="button2"></div>
  </div>
</body>

【讨论】：

蓝色部分应该在红色按钮之间！
我只是想帮助您解决问题，而不是为您完成所有工作！