position 定位属性，检索对象的定位方式；

一、语法：

position：static(initial) /absolute/relative/fixed/sticky(粘性定位)，unset相当于static

取值：

1、static：默认值，无特殊定位，对象遵循HTML原则, 会忽略left、top、right、bottom和z-index属性；

2、relative ：相对定位，是相对于默认位置的偏移定位，通过设置left、top、right、bottom 值可将其移至相对所需位置(元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响)

3、absolute：相对于父级元素的绝对定位，脱离文档流，不占据空间，其位置是相对于最近的定位父元素进行定位，若父级都没有定位，则以html，浏览器的位置为相对位置。可设置“left”、“top”、“right” 以及 “bottom” 属性。
　4、fixed：固定相对浏览器的绝对定位，位置通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。（IE6浏览器不支持此定位）

　5、sticky：粘性定位不脱离文档流，仍然保留元素原本在文档流中的位置。是css定位新增属性；是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。
兼容性不好


例如

.sticky {position: sticky; top: 0px; padding: 5px; background-color: #cae8ca}

<div class="sticky">我是粘性定位!</div>

     <div style="padding-bottom:2000px">

  <p>滚动我</p>

     </div>

sticky使用条件：

1、父元素不能overflow:hidden或者overflow:auto属性。

2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

3、sticky元素仅在其父元素内生效

二、绝对定位和相对定位的区别

1、参照物不同，绝对定位的参照物是包含块（父级），相对定位的参照物是元素本身位置；

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

三、包含块的概念及作用

包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；

默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据根元素来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。父级相对，子级绝对；

定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

四、定位元素层叠属性：

z-index : auto | number 检索或设置对象的层叠顺序。

auto：默认值。遵从其父对象

number:无单位的整数值。可为负数

说明：

没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。

此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。

让一个元素始终在窗口水平、垂直位置居中：

1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}

2、

div{width:200px;height:200px;background:#f00;position:absolute;left:50%;top:50%;margin:-100px 0 0 -100px;}

四-1)透明属性

IE10以下浏览器写法：

filter:alpha(opacity=value);取值范围 1-100

IE9两种都支持，但是优先显示上面的方法；

兼容其他浏览器写法：

opacity: .value（0.2）

(value的取值范围0-1,0.1,0.2,0.3-----0.9)

例如：opacity: .8 ; filter:alpha(opacity=80);

Background:rgba(255,255,255,0.5)仅仅只是透明背景颜色，不透明文字

五、命名锚点链接的应用

定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

命名锚点链接的应用：

命名锚点的作用：在同一页面内的不同位置进行跳转。

制作锚标记：

1)给元素定义命名锚记名

语法：<标记 id="命名锚记名称"> </标记>

2)连接命名锚记

语法：<a href="#命名锚记名称"></a>

六、圆角切图

1、纯css 书写(css3 css2)

2、切图拼接；

扩展：

七、Flash

1、插入flash

1）语法：

<param name=“wmode” value="transparent" /> //设置flash背景透明

<param name="movie" value="flash路径及全称" />（其他浏览器识别）

wmode="transparent">

</embed> （ie浏览器识别）

</object>

2）将flash背景设置为透明

其他浏览器：

IE浏览器：

给<embed>标记添加属性： wmode="transparent"

说明：flash源文件格式.fla, 导出影片为.swf, 创建播放器格式为.exe.

gif格式：.gif

3）IE中不显示flash,可做如下操作：

A.下载安装flash player;

B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。

八、marquee滚动字幕的应用：

<marquee

behavior=“scroll/alternate”  滚动形式

direction="up/down/left/right"    滚动的方向

scrollamount=“ ”              滚动速度

height=" "                  滚动的范围（上下左右）

width=" ">           

这里放的是内容

</marquee>

说明：

behavior（行为）="scroll(滚动)/alternate（晃动）

direction（方向）="up(从下向上)/down（从上向下）

/left（从右向左）/right（从左向右）“

scrollamount（滚动速度）="value"

height="value(上下滚动范围)"

width=""(左右滚动范围)

扩展：

九、滚动条

自己定义滚动条的颜色

scrollbar-face-color(立体滚动条凸出部分的颜色)

scrollbar-highlight-color(滚动条背景条的颜色)

scrollbar-base-color(滚动条背景的亮光色，基底)

scrollbar-arrow-color(上下按钮三角箭头的颜色)

scrollbar-shadow-color(立体滚动条阴影的颜色)(滑动滚动条边框色,ie显示)

scrollbar-dark-shadow-color(立体滚动条强阴影的颜色（浏览器不显示）)

以上适用与<body>、<div>、<textarea>、<iframe>

css定位瞄点透明相关知识

position 定位属性，检索对象的定位方式；

相关推荐