秦小

CSSMM4E 笔记 - 3.14 - 页面中元素的定位

发表于 | 分类于

Position 属性工作原理

  • Absolute 使元素相对最近的 positioned 祖先元素定位; 否则相对viewport(broswer window)定位; 脱离 page flow.
  • Relative 相对自身原本的位置定位; 不脱离 page flow, 在原本位置留下空白; 更多用于包含absolutely positioned 元素.
  • Fixed 相对viewport定位; 脱离 page flow.
  • static Default.
  • 元素的层次
    z-index: 3; Make a element above or beneath others.

  • 隐藏页面部分

    1. visibility: hidden | visible; 显示/隐藏元素, 不脱离流, 留空白.
    2. opacity: 0 .. 1; 不脱离流, 留空白; 可用于动画.
    3. display: .. | none; 脱离流, 空白被其他元素填充.

    display: none; skip visibility property;
    display: none; 同 position: abosulte; visibility: hidden;效果相同.

    css tooltip:
    http://www.menucool.com/tooltip/css3-tooltip
    http://qtip2.com//

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    /* 1. Create the HTML for the image and caption. */
    <figure class="hat">
      <img src="hat.jpg" width="100" height="100">
      <figcaption>A picture of a hat</figcaption>
    </figure>
    /* 2. Postion the Caption. */
    .hat {
      postion: relative;
      width: 100px;
      height: 100px;
    }
    .hat figcaption {
      display: none;  /* 3. Hide the caption */
      /* or
       * opacity: 0;
       * transition: opacity .5s ease-in; */
      postion: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
    }
    /* 4. Make the caption appear when a visitor mouses over the image. */
    .hat:hover figcaption {
      display: block;
      /* or
       * opacity: 1; */
    }

强大的定位策略

  • 元素内定位 - relative containing absolute
  • 超出盒子 - 使用负数margin使元素伸出(poke out of)其容器
  • 固定 (fixed) 定位 - 固定navigation panel, search box, site logo, sidebar…