详解CSS中postion和opacity及cursor的特性

详解CSS中position、opacity及cursor的特性

position

CSS中的position属性用于指定元素的定位方式。常用的取值有static、relative、absolute和fixed。其中，static是默认值，元素不存在定位（也就是正常流布局），不受top、right、bottom、left等属性的影响。relative与static相似，但是可以使用top、right、bottom、left等属性进行相对定位。absolute用于绝对定位，元素脱离正常流布局，相对于父元素进行定位。fixed也用于绝对定位，相对于浏览器窗口进行定位。

示例1：

<div style="position:relative;left:50px;top:50px;">
  这是一个相对定位的div元素。
</div>

示例2：

<div style="position:absolute;left:50px;top:50px;">
  这是一个绝对定位的div元素。
</div>

opacity

CSS中的opacity属性用于指定元素的透明度。取值范围为0（完全透明）到1（完全不透明）。透明度的变化会影响到元素的内容和背景，而不仅仅是背景。

示例1：

<div style="opacity:0.5;">
  这是一个透明度为0.5的div元素。
</div>

示例2：

div:hover {
  opacity:0.5;
}

当鼠标悬浮在div元素上时，透明度变为0.5。

cursor

CSS中的cursor属性用于指定鼠标在元素上的指针样式。常用的取值有default、pointer、text、move等。其中，default是默认值，表示使用浏览器默认的指针样式。pointer用于指定链接或可点击元素的指针样式。text用于指定文本输入时的指针样式。move用于拖动页面元素的指针样式。

示例1：

<div style="cursor:pointer;">
  这是一个光标为指针的div元素。
</div>

示例2：

div:active {
  cursor:move;
}

当div元素被点击并正在被拖动时，光标的样式变为move。