1、定位
设置定位方式position
position取值如下：
static 静态定位，默认的定位方式
absolute 绝对定位，以当前网页的左上角为坐标原点
fixed 固定定位，以当前浏览器窗口的左上角为坐标原点
relative 相对定位，相对于元素原来的位置
定位属性
当定位方式设置为absolute、fixed、relative三者之一时，可以通过以下四个属性设置元素的位置。top 相对顶边的距离 right 相对右边的距离
bottom 相对底边的距离 left 相对左边的距离
这四个属性的取值可以为正负整数，单位为px，建议不要同时使用top和bottom，也不要同时使用left和right。
设置元素的叠放顺序z-index
例如：z-index:1 ，数字越大则越靠上层。
设置元素是否可见visibility
visibility与display:none的区别是它只隐藏元素，但保留元素占用的位置。取值：hidden 隐藏 visible 显示
2、半透明
gif图片透明
PNG半透明
网页元素半透明
img{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
3、CSS下拉菜单
<style>
.menu {position: relative; display: inline-block;}
.sub{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.menu:hover .sub {display: block;}
</style>
<div class="menu">
<span>主菜单</span>
<div class="sub">
<p>下拉菜单内容</p>
</div>
</div>
4、CSS实现提示框
<style>
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext { visibility: visible;}
</style>
<body>
<div class="tooltip">移到我上面
<span class="tooltiptext">工具提示文本</span>
</div>
在线咨询