「CSS」- 将元素悬浮在右上角

  CREATED BY JENKINSBOT

问题描述

将元素悬浮在右上角,使用绝对定位即可,并无难度。但是我们希望:将元素悬浮在其他元素内部的右上角,效果类似如下:

解决办法

在示例中的 HTML 代码:

<section>
  <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>
  <div>
    <button>button</button>
  </div>
</section>

实现功能的 CSS 代码:

section {
    width: 50%;
    border: 1px solid;
    padding: 15px;
    margin: 50px;

    position: relative;
}

h1 {
    display: inline;
}

div {
    position: absolute;
    top: 0;
    right: 0;
}

扩展:如何实现如下效果


亦即“文字”没有被“按钮”覆盖,而是被“挤”到先行。实际上这就比较简单:

在示例中的HTML代码:

<section>
  <div>
    <button>button</button>
  </div>
  <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>
</section>

实现功能的CSS代码:

section {
    width: 50%;
    border: 1px solid;
    padding: 15px;
    margin: 50px;
}

h1 {
  display: inline;
}

div {
   float: right;
}

参考文献

Float a div in top right corner without overlapping sibling header