定义 CSS 样式定位属性

鸶雯

“ 定位” 样式属性确定与选定的 CSS 样式相关的内容在页面上的定位方式。
1 如果尚未打开“CSS 样式” 面板，请打开该面板 (Shift+F11)。
2 双击“CSS 样式” 面板顶部窗格中的现有规则或属性。
3 在“CSS 规则定义” 对话框中，选择“ 定位”，然后设置所需的样式属性。
位置确定浏览器应如何来定位选定的元素，
position  定位
“absolute” 绝对 使用“ 定位” 框中输入的、相对于最近的绝对或相对定位上级元素的坐标（如果不存在绝对或相对定位的上级元素，则为相对于页面左上角的坐标）来放置内容。
“relative”相对 使用“ 定位” 框中输入的、相对于区块在文档文本流中的位置的坐标来放置内容区块。例如，若为元素指定一个相对位置，并且其上坐标和左坐标均为 20px，则将元素从其在文本流中的正常位置向右和向下移动 20px。也可以在使用（或不使用）上坐标、左坐标、右坐标或下坐标的情况下对元素进行相对定位，以便为绝对定位的子元素创建一个上下文。
“fixed” 固定 使用“ 定位” 框中输入的坐标（相对于浏览器的左上角）来放置内容。当用户滚动页面时，内容将在此位置保持固定。
“static” 静态 将内容放在其在文本流中的位置。这是所有可定位的 HTML 元素的默认位置。
top  层距离顶点纵坐标的距离
left 层距离顶点横坐标的距离
width  层的宽度
height  层的高度

Visibility  可见性确定内容的初始显示条件。如果不指定可见性属性，则默认情况下内容将继承父级标签的值。body 标签的默认可见性是可见的。选择以下可见性选项之一：
Inherit   继承 继承内容父级的可见性属性。
Visible   可见 将显示内容，而与父级的值无关。
Hidden   隐藏 将隐藏内容，而与父级的值无关。
Z-index   轴确定内容的堆叠顺序。Z 轴值较高的元素显示在 Z 轴值较低的元素（或根本没有 Z 轴值的元素）的上方。值可以为正，也可以为负。（如果已经对内容进行了绝对定位，则可以轻松使用“AP 元素” 面板来更改堆叠顺序。）
溢出确定当容器（如 DIV 或 P）的内容超出容器的显示范围时的处理方式。这些属性按以下方式控制扩展：
overflow  益出
Visible  可见 将增加容器的大小，以使其所有内容都可见。容器将向右下方扩展。
Hidden   隐藏 保持容器的大小并剪辑任何超出的内容。不提供任何滚动条。
Scrol    滚动 将在容器中添加滚动条，而不论内容是否超出容器的大小。明确提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。该选项不显示在“ 文档” 窗口中。
Auto     自动 将使滚动条仅在容器的内容超出容器的边界时才出现。该选项不显示在“ 文档” 窗口中。
位置指定内容块的位置和大小。浏览器如何解释位置取决于“ 类型” 设置。如果内容块的内容超出指定的大小，则将改写大小值。
位置和大小的默认单位是像素。还可以指定以下单位：pc （皮卡）、pt （点）、in （英寸）、mm （毫米）、cm （厘米）、em （全方）、(ex) 或 % （父级值的百分比）。缩写必须紧跟在值之后，中间不留空格。例如，3mm。剪辑定义内容的可见部分。如果指定了剪辑区域，可以通过脚本语言（如 JavaScript）访问它，并操作属性以创建像擦除这样的特殊效果。使用“ 改变属性” 行为可以设置擦除效果。
clip  限定只显示裁切出来的区域，裁切出的区域为矩形，只要设定两个点即可。
一个事矩形左上角的顶点，由TOP和 right 两项的设置完成。
另一个事右下角的顶点，由Bottom和right 两项设置完成。
注：设置对象的可视区域，只对绝对定位的对象有效，应用才属性时，对象必须使用position：absolute
例如：img{ position：absolute；clip：rect{10px 300px 300px 20px}}
top：10px相当于顶部距原有上边为10px，而bottom：300px则表示底部上边300px，left：20px表示相对于左边距20px，right：300px表示相对于左边300px，表示相对于左边300px，最终显示图像大小的width与height为300-20---300-10，即被剪切为一张280*290px图像。
扩展属性

1、鼠标光标属性
crosshair  交叉十字
text       文本选择符号
wait  windows的沙漏形状
Default   默认的鼠标形状
help      带问号的鼠标
e-resize   向东的箭头
ne-resize  指向西北的箭头
n-resize   向北的箭头
nw-resize  指向西北的箭头
w-resize   向西的箭头
sw-resize  向西南的箭头
s-resize   向南的箭头
se-resize  向东南的箭头

2、滤镜属性
Alpha   透明的层次效果
blur   快速移动的模糊效果
chroma  特定的颜色的透明效果
flipH   水平翻转效果
flipV   垂直翻转效果
Glow    边缘光晕效果
Gray   灰度效果
Invert  将颜色的饱和度及亮度值完全反转
Mask    遮罩效果
Shaow   渐变阴影效果
Wave    波浪变形效果
Xray    x射线效果