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

时间:2016-05-26 16:35:01

标签: html css

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

然而,这个教程建议使用绝对定位或浮动。这部分工作,但是当我改变屏幕尺寸时,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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

将其包裹在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>