使文本始终位于框的右上角

#length
{
  position: relative;
  width: 200px;
  background-color: lightblue;
}


#asdf {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 10px;
    border: 1px solid #73AD21;
}

https://codepen.io/anon/pen/YOjKvR

相对于父元素的位置和相对于“test”元素的绝对位置

父元素应该是相对的,这样它就成为嵌套在其中的任何绝对位置元素的新容器。删除#asdf的高度和宽度,使其大小与内容相符。

#length
{
  width: 200px;
  background-color: lightblue;
  position: relative
}

#asdf {
    position: absolute;
    top: 5px;
    right: 5px;
    border: 1px solid #73AD21;
}

尝试这样修改css:

#length
{
  width: 200px;
  background-color: lightblue;
  position: relative;
}


#asdf {
    position: absolute;
    top: 5px;
    right: 0px;
    width: 40px;
    height: 10px;
    border: 1px solid #73AD21;
}

或者另一种选择:

#length {
    width: 200px;
    background-color: lightblue;
}
#asdf {
    position: relative;
    top: 5px;
    width: 40px;
    border: 1px solid #73AD21;
    display: inline-block;
}
.right{
    width: 100%;
    text-align: right;
}

<div id="length">
    <div class="right">

<div id="asdf">
      test
    </div>
    </div>
    aa<br>
    bb<br>
    cc<br>
    dd<br>
    ee<br>
    ff<br>
    <br>

如果在文本周围放置段落标记,则可以更好地控制文本的显示方式,因为可以为p标记编写css。

#length {
  width: 200px;
  background-color: lightblue;
}

#asdf { 
  position: relative;
  top:5px;
  left: 50px;
  width: 40px;
  height: 10px;
  border: 1px solid #73AD21;
}

div>p{
position:relative;
float:right;
margin-top:-5px;

}

<div id="length">

  <div id="asdf">
    <p>test</p>
  </div>
  aa
  <br/> bb
  <br/> cc
  <br/> dd
  <br/> ee
  <br/> ff
  <br/>
  <br/>

</div>