26、CSS 页面元素定位全解析

CSS 页面元素定位全解析

1. 定位属性与宽高

可以使用 height 和 width 属性指定元素的大小。若使用两个以上的定位属性，或者使用 left 和 right 、 top 和 bottom 这两组属性中的任意一组，也能指定元素的大小。当指定一个块的两条平行边的位置时，就确定了该块的高度或宽度；若指定四条边的位置，则同时确定了块的高度和宽度。

以下是一个包含定位 <div> 元素的页面样式表示例：

<style type="text/css">
  body { background-color: #aaaaaa; }
  div {
    background-color: white; border: 2px solid black; padding: 10px;
  }
  #pos {
    position: absolute;
    left: 50px;
    top: 50px;
  }
  #pos2 {
    top: 160px;
    left: 75px;
    bottom: 75px;
    right: 100px;
    position: absolute;
    overflow: hidden;
  }
  #pos3 {
    position: absolute;
    width: 50%;
    height: