html - 在没有绝对定位和调整大小失真的情况下覆盖 div

Question

我想创建一 strip 有刻度线和一个球(如刻度)的线。

然而，这方面的教程建议使用绝对定位或 float 。这部分有效，但当我更改屏幕大小时，div 移动了位置。

.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%;
}

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

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>