Web前端-HeadFirst笔记-CH11-定位

Position

1.是什么

绝对定位{position：absolute；}可以对任何元素指定精确的绝对位置,包括块元素/内联元素。

2.做什么

两栏布局的常用技术，让内容保持正确的顺序。

3.怎么实现的

一个元素绝对定位时，浏览器：

①首先将此元素从流中完全删除

②然后将此元素放置在top和right属性指定的位置上或者left bottom。

4.属性值

• 默认值：static（静态），此时元素放在正常的流中，不由写作者指定。
• 绝对定位：absolute。完全由作者指定元素的位置。参考的相对位置：距离最近的父元素。
• 固定定位:fixed。距离浏览器窗口边界的偏移量，滚动页面不会动。
  
• 相对定位relative，元素正常流入页面，但在页面上显示之前要进行偏移。常常用于更高级的定位和特殊效果。

------》绝对定位元素不用指定宽度。默认块元素会占浏览器的整个宽度（减去指定的左右偏移量）。

------》指定位置：①px②%，改变浏览器宽度时，位置会改变。

------》folat可以将一个元素从流中取出，让其左右浮动，最终仍由浏览器决定放置的位置。

5.其他参数

 z-index

表示在虚拟z轴上的位置。针对多个定位元素在同一位置时的排列。

• 越大越靠上，可设置-2 -1 0 1 2值指定安放顺序。
• 默认页面的index值只有使用开发工具检查CSS否则无法得知。
• 通常设置为1可确保在其他元素之上，当多个元素自行定位和分层，需要慎重考虑z-index值。
• 存在最大的z-index值
• 只有使用CSS设定绝对位置，固定位置，相对位置的元素存在z-index属性

6.使用特例

对一个图像绝对定位

①为image添加div，添加id（可不加div直接使用<img id=“”>)
②按内容重要顺序在html中排列此div

③在CSS中使用 #imgid {position：absolute；top:px/%;left:px/%;}指定位置，距离页面边距的距离。当为负值，会隐藏一部分图像。

-----》动画：CSS3引入了基本动画，提供了变换和过渡特性。CSS动画做不到的效果需要借助于javascript。