覆盖没有绝对定位的div并调整失真大小

Question

我想创建一个带刻度线和球（如刻度）的线。

然而，这个教程建议使用绝对定位或浮动。这部分工作，但是当我改变屏幕尺寸时，div会移位。

＆＃13;

＆＃13;

.line {
  width: 100%;
  min-height: 5px;
  background-color: black;
  padding: 20px;
  margin-top: 20%;
}
.point {
  -moz-border-radius: 50px/50px;
  -webkit-border-radius: 50px 50px;
  border-radius: 50px/50px;
  border: solid 21px #f00;
  width: 50px;
  height: 50px;
  background-color: red;
  float: right;
  overflow: visible;
  position: relative;
  z-index: 1000;
  padding: 20px;
  margin-top: -15%;
}

＆＃13;

<div class="line"></div>
<div class="point"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将其包裹在div中并对内部div使用绝对定位，同时不要使用margin-top百分比（https://jsfiddle.net/xv259d4p/1/）：

.line {
    width:100%;
    min-height:5px;
    background-color:black;
    padding:20px;
    margin-top:60px;
    position: absolute;
}
.point {
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 50px/50px;
    border:solid 21px #f00;
    width:50px;
    height:50px;
    background-color:red;
     float: right;
    overflow: visible;
    position: absolute;
    z-index: 1000;
    padding:20px;
    right: 0;
    margin-top: 20px;  

}
.outer {
  display: block;
  width: 100%;
  top: 0px;
  left: 0px;
  position: relative;
}

<div class="outer">
  <div class="line"> </div>
  <div class="point"></div>
</div>