CSS—定位

来源：互联网发布：linux 查看进程命令编辑：程序博客网时间：2024/05/16 15:44

CSS—定位

CSS有三种基本的定位机制：普通流、浮动、绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

没有任何定位修饰效果

块级元素从上到下一个接一个地排列，元素之间的垂直距离是由元素的垂直外边距计算出来。
行内元素在一行中水平布置。如图中P标签内的span，超链接，图片。

行内元素的布局

可以使用水平内边距padding-left padding-right、边框border-leftborder-right和外边距margin-left margin-right调整它们的间距。
但是，垂直(top bottom方向)内边距、边框和外边距不影响行内框的高度。这句话的意思是，在上图中如果定义span垂直方向上的边距，不会因此而扩充P的高度。还要铭记一点，行内元素没有高度。
```
      span{          background: blue;          padding-left: 20px;          padding-right: 20px;          border: 10px solid yellow;          margin-right: 20px;          margin-left: 20px;      }  <div>  <p><span>hi</span>hello</p>  </div>
```
左:IE6 右：IE8
调整水平方向的间距，是可以有效果的。
IE6出现上边距被隐藏，是因为p在IE6内是没有默认margin-top。所以p的顶部与body的顶部重合，并没有空余的位置供span的上边距展示。
但是无论怎么样，P的高度也没有因此被扩大。
再设置一下垂直边距，再加一个p与span，增强一下效果。
发现第二行的p中的span增大内边距后占据上一行中的span。
```
  <span>          padding-top: 30px;          padding-bottom: 20px;          margin-bottom: 20px;          margin-top: 20px;  </span>
```

效果

不过，设置行高可以增加这个框的高度。
默认情况下，p中的span是继承其父元素的line-height的，但是我们单独设置line-height也会影响p的行高。span{ line-height: 100px;}

效果

块级元素的定位
- static
  默认。参照正常的文档流。当未对元素设置定位时，元素的默认的位置，即是按照static定位的。
```
    div{        font-family: "微软雅黑";        color:white;        font-weight: bold;        line-height: 100px;        text-align: center;        font-size: 30px;        width: 100px;        height:100px;    }    #d1{        background: pink;    }    #d2{        background: yellow;    }<div id='d1'>第一</div><div id='d2'>第二</div>
```
  position：static 默认效果
- relative
  生成相对定位的元素，相对于其正常位置进行定位。它原本所占的空间仍保留。
```
    #d2{        background: yellow;        position: relative;        top:30px;        left: 20px;    }
```
  position：relative
  需要注意的是，在定义完位置的属性为relative是，需要为元素指定top、left、right、bottom。上例子中，div2在左面，上面有div1，所以需要为div2设置left、top。
```
    #d1{        background: pink;        position: relative;        top: 20px;        left: 20px;    }
```
  position:relaitive
  发现div1参照其初始位置的顶部向下移动20px，但是并没有导致div2向下移动。div2由于其在文档流的下面，所以会覆盖div1。
```
    #d1{        background: pink;        position: relative;        bottom: 50px;    }    #d3{        float: left;    }
```
  加了一个浮动后
  虽然div1设置了bottom: 50px;所以空出来50px的位置，但是当增加一个#d3（即那个长的），并被设置为浮动后，发现，他并没有向上浮动挨着div1，说明原本所占空间被默认保留。
- absolute
  元素框从文档流完全删除，并相对于其包含块（父级元素）定位。
  包含块可能是文档中的另一个元素或者是初始包含块。
```
    #d2{        height: 120px;        background: yellow;        position: absolute;        top:50px;        left: 50px;    }<body>//包含块<div id='d1'>第一</div>        <div id='d2'>第二</div><div id='d3'>第三</div></body>
```
  # d2 position: absolute;
  元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。如图，d3占据了div2的位置，div2相对于父级元素body定位。
  元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
```
    span{        line-height: 2rem;        background:url(bac1.jpg);        position: absolute;        top: 50px;        left: 50px;    }<div id='d3'><span id="">插入的span</span>第三</div>
```
  效果
  上图是在ie9及现代浏览器中的结果。即使是内联元素，当position:absolute;之后，也会生成一个块级框。
  有这样的效果，前提是span的父级元素，没有定位，即没有设置position：除了默认，那么span就根据最外层以定位的元素定位，都没有就可以根据根元素html定位。
  【注意】
  当position：absolute时，可以使用clip剪裁clip:rect(top right bottom left);
  分别指当元素定位后，（元素不能动了）
  
  详细
- fixed
  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
```
    img{        position: fixed;        width: 40px;        bottom: 10px;        left: 10px;    }
```
  小花
  图像小花的设置，是相对于视窗本身，观察垂直滚动条已经在最下面了，小花依旧保持在最下面的位置。（IE6以前不兼容）

【z-index】
前提：position：absolute；position：fixed；（默认与relative不可以）
并且：设置完left、right、bottom、top
这样就可以使用z-index了，其默认是0，正值的话会在上面，负值的话会在下面。

        #d3{            position: absolute;            left: 0px;            top: 0px;            z-index: -1;            width: 400px;            background: #FFFFA0;        }

效果

0 0

CSS—定位

CSS—定位

CSS有三种基本的定位机制：普通流、浮动、绝对定位。

行内元素的布局

块级元素的定位