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。