「CSS」- position

四个值

绝对定位：absolute、fixed
相对定位：relative
默认取值：static

relative

  • 定位基准：相对于原来位置移动，元素设置 relative 之后仍然处在文档流中，不影响其他元素的布局；
  • 给元素设置 relative 参数，并设置 top、left 等参数，虽然宽高都没变，但元素相对于原来位置偏移，所以撑大容器；

absolute

  • 定位基准：元素会脱离文档流，相对于最近的非 static（即 relative、absolute、fixed 或 sticky）祖先元素定位。如果没有这样的祖先元素，则相对于初始包含块（通常是 <html>）；
  • 滚动影响：元素会随页面滚动而移动。
  • 父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。

fixed

  • 定位基准：相对于视口（viewport）定位，即使页面滚动，元素位置也不会改变。
  • 滚动影响：元素不会随页面滚动，始终固定在视口中的同一位置。

说明：元素在没有定义宽度的情况下，宽度由元素里面的内容决定，效果和用 float 方法一样。

场景 | 将元素悬浮在右上角 | Float a div in top right corner

Float a div in top right corner without overlapping sibling header

问题描述

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

解决办法

在示例中的 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;
}

Filed under: K4NZDROID - @ 12:22 AM